ボタンをクリックしたときにiframeを表示させるにはどうすればいいですか？

Question

<center> 
<button type= "button" onclick="myFunction()">Things To Do in Miami</button> 
<div id="loadiframehere"> 
<iframe id="myframe"src="https://thingstodo.expedia.com/miami-florida-activities/" width="450" height="275" > </iframe> 
</div> 
</button> 
<script> 
function myfunction(){ 
var x = document.createElement("IFRAME") 
set.attribute("src","http://www.miamigov.com/home/"); 
set.attribute("width","600") 
set.attribute("height","400") 

document.getElementByID("myframe").src="http://www.miamigov.com/home/" 
document.getElementByID("myframe").width="300"; 
document.getElementByID("LOADHERE").appendchild(x); 

} 
    </script> 
</center> 
</section> 

これは私の先生が私たちにコピーしてくれたコードですが、ボタンは機能しません。ボタンをクリックする前にiframeのみが表示されます。

Answer 1

ここに修正があります。あなたのコードは完全に間違っていた。あなたは、Javascriptが大文字と小文字を区別していることに注意する必要があります。 getElementByIDはgetElementByIdとは異なります。

また、 "x"要素をiframeに作成しましたが、htmlにiframeを作成し、 "set"属性がどの要素にも関連付けられていませんでした。あなたは "myFunction"と呼ばれる関数を作成しましたが、buttongでは "myfunction"を呼び出していました。再び、javascriptは大文字小文字の区別です。

Javascriptの構文を勉強する必要があります。

function myfunction(){ 
 
var x = document.createElement("IFRAME"); 
 
x.setAttribute("src","http://www.miamigov.com/home/"); 
 
x.setAttribute("width","600"); 
 
x.setAttribute("height","400"); 
 

 
document.getElementById("loadiframehere").appendChild(x); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<center> 
 
<button type= "button" onclick="myfunction()">Things To Do in Miami</button> 
 
<div id="loadiframehere"> 
 

 
</div> 
 
</center>