javascript нажмите кнопку и создайте изображение в div

Я искал эту проблему и нашел некоторые решения, но что-то не так, что я должен делать, потому что это не работает. Хотелось бы просто просто нажать кнопку и сделать изображение в определенном div. Позже я хотел бы добавить больше кнопок, и каждая кнопка будет соответствовать изображению, изменяющему это изображение в том же div.javascript нажмите кнопку и создайте изображение в div

Мой код заключается в следующем:

<!doctype html> 
 
<html> 
 
<head> 
 
    <title>Example Domain</title> 
 

 
    <meta charset="utf-8" /> 
 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <style type="text/css"> 
 
    
 
\t </style>  
 
</head> 
 
<body> 
 
\t <button id="button1">Button 1</button><button id="button2">Button 2</button></br> 
 
\t <button id="button3">Button 3</button><button id="button4">Button 2</button></br> 
 
\t <p> </p> 
 
\t 
 
\t <div id="1"></div> 
 
\t <div id="2"></div> 
 
\t 
 
\t 
 
\t <script type="text/javascript"> 
 
\t \t document.getElementById("button1").onclick=function() { 
 
\t \t \t document.getElementById("1").appendChild="<img id="image1" src="img/image1.png" />; 
 
\t \t } 
 
\t \t document.getElementById("button2").onclick=function() { 
 
\t \t \t document.getElementById("1").appendChild="<img id="image2" src="img/image2.png" />; 
 
\t \t } 
 
\t \t document.getElementById("button3").onclick=function() { 
 
\t \t \t document.getElementById("2").appendChild="<img id="image3" src="img/image3.png" />; 
 
\t \t } 
 
\t \t document.getElementById("button2").onclick=function() { 
 
\t \t \t document.getElementById("2").appendChild="<img id="image4" src="img/image4.png" />; 
 
\t \t } 
 
\t \t 
 
\t </script> \t 
 
</body> 
 
</html>

но почему-то я не могу сделать эту работу.

источник

2015-02-22 Goncalorsr

Вы используете двойные кавычки внутри строки, инкапсулированный в двойные кавычки:

"<img id="image1" src="img/image1.png" />;

Это должно быть

"<img id=\"image1\" src=\"img/image1.png\" />";

Поскольку JavaScript использует кавычки (одинарные или двойные), чтобы установить строки, нужно чтобы избежать кавычек внутри строки с \, чтобы избежать разрыва строки. В вашем исходном коде JavaScript анализирует строку, находит конец строки в id= и ломается, потому что ожидает линейный терминатор ; или +.

Посмотрите на выделение в первом и втором кодовых блоках. Это все красное во втором, указывающее правильную экранированную строку.

ТАКЖЕ

appendChild работает только с nodes/elements и не со строками. Вам нужно innerHTML, однако это будет каждый раз перезаписывать содержимое вашего div. Если вы не хотите, что вы могли бы использовать: insertAdjacentHTML()

Пример:

document.getElementById("1").insertAdjacentHTML("beforeend", "<img id=\"image1\" src=\"img/image1.png\" />");

источник

2015-02-22 11:26:44 Mouser

Есть ли двойные кавычки отсутствуют, в конце концов? Истрим с ним и без него и не работает. Должен ли я перейти на innerHTML вместо appendChild? – Goncalorsr

@Goncalorsr Я обновил свой код. Это должно дать вам всю необходимую информацию. Также нажмите «F12» на клавиатуре в браузере, он откроет инструменты для разработчиков, чтобы вы могли видеть ошибки, которые создает ваша страница при разборе в консоли. – Mouser

САМЫЙ СОВЕРШЕННЫЙ! Спасибо, Mouser! – Goncalorsr

Попробуйте это:

Javascript: 
document.getElementById(<img id>).src = "<link to img>"; 
HTML: 
<img id='<img id>' src='<link to img>'>

источник

2015-02-22 14:32:00 SilverNeon123

javascript нажмите кнопку и создайте изображение в div

ответ

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