2024/02/06(火)09:53
javascriptのお勉強：innerhtmlで画像表示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
<button type=”button” id="sample0" onclick=buttonText0()>クリック0</button> <button type=”button” id="sample1" onclick=buttonText1()>クリック1</button> <p id="pid0"> </p> <p id="pid1"> </p> <script> function buttonText0 () { var pppp = document.getElementById('pid0'); pppp.innerHTML="<img src=\"http://snc29654.php.xdomain.jp/jpg/33.jpg\" width=\"300px\">" ; }
function buttonText1 () { var pppp = document.getElementById('pid1'); pppp.innerHTML="<img src=\"http://snc29654.php.xdomain.jp/jpg/1.jpg\" width=\"300px\">" ; }
</script></body></html>
innerhtmlを使わなくても、以下で同じ結果となる
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
<button type=”button” id="sample0" onclick=buttonText0()>クリック0</button> <button type=”button” id="sample1" onclick=buttonText1()>クリック1</button><br> <img src="" width="300px" id="pid0"><br> <img src="" width="300px" id="pid1"> <script> function buttonText0 () { var pppp = document.getElementById('pid0'); pppp.src="http://snc29654.php.xdomain.jp/jpg/33.jpg"; }
function buttonText1 () { var pppp = document.getElementById('pid1'); pppp.src="http://snc29654.php.xdomain.jp/jpg/1.jpg"; }
</script></body></html>