Как загрузить содержимое html при использовании события onclick?

Я работаю над небольшим случайным проектом, но я столкнулся с проблемой. Я использую событие onclick button для организации изображений с разными темами. Однако, когда я пытаюсь поместить код в часть .innerHTML, он разбивает код, и он не будет работать. Я делаю что-то неправильно? Вот мой кодКак загрузить содержимое html при использовании события onclick?

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function Function1() { 
    document.getElementById("demo").innerHTML = "<img>imagelinkgoeshere</img>" 
    } 
</script> 
</head> 
<body> 

<button style="width:100px;font-size:20px;font-family:Playball;color:#910000;background-color:rgba(0,0,0,0);border:solid 0px #fff" onclick="Function1()">Theme1</button> 

<p id="demo">Photos appear here</p> 

</body> 
</html>

Очевидно, что бы больше кнопок и, следовательно, другие темы, но я просто показываю вам основы, чтобы держать его загромождать. Я делаю что-то неправильно? Нужен ли мне код Javascript или результат, чтобы сделать эту работу? Благодарю.

источник

2015-08-19 simsun2

Что значит «это ломается, и это не сработает»? Вы получаете какие-либо ошибки в консоли? – yvesmancera

Ваше изображение HTML неверен. Синтаксис для изображения

<img src="imagelinkgoeshere">

Так функция должна быть:

function Function1() { 
    document.getElementById("demo").innerHTML = '<img src="imagelinkgoeshere">'; 
}

источник

2015-08-19 18:33:58 Barmar

Спасибо, теперь он работает! – simsun2

возможно лучшей альтернативой использованию innerHTML будет динамически создавать изображения HTML-элемент, а затем вставьте его в DIV:

function Function(1) { 
    var container = document.getElementById('demo'); 
    var img = document.createElement('img'); // creates an <img> HTML element 
    img.src = 'imageurl.png'; // Giving the image some a target to display 
    demo.appendChild(img); // Add the newly created image to the container #demo 

}

источник

2015-08-19 18:43:16 Mahout

Как загрузить содержимое html при использовании события onclick?

ответ

Смежные вопросы