function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>このコードをW3Schoolsで見つけ、「myDIV」を「h3」に置き換えて、ヘッダーのテキストを変更できるようにしました。
<div class="speech-buble-top"><h3 id="h3"> Happy Birthday Tiffany!</h3></div>
この問題は、functionキーワードを使用して関数を宣言することに起因します。通常はこれで問題ありませんが、変数に割り当てられた関数としてHTMLで呼び出されるJavaScript関数を使用する方が簡単であることがわかりました。ES6矢印構文を使用する場合は、最新の標準を使用し、関数を変数にバインドすることになります。次のように関数コードを書き直してみてください。
<script>
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<button onclick="myFunction()">Try it</button>
<div id="myDIV" style="display: none">
<h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加