私はプログラミングが初めてです。このコードを実行するたびに何も起こりません。なぜこれが私に教えてくれますか？クリックすると値を増減させるボタンを作る方法は？
<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<script type="text/javascript">
var x = 0
document.write(x)
function button1() {
document.write(x++)
}
function button2(){
document.write(x--)
}
</script>
</body>
document.writeが問題です。ブラウザがページを完全に読み込む前にのみ動作します。その後、document.writeは機能しません。既存のページの内容をすべて削除します。
最初にdocument.writeが実行され、ページが完全に読み込まれる前に実行されます。このため、2つのボタンの隣に0が表示されます。
しかし、ページが読み込まれました。ボタンをクリックするとイベントハンドラが実行されるため、ページが既に完全にロードされているため、その時点では機能しないdocument.writeが呼び出されます。
document.writeはもう使用しないでください。DOMを最新のものに更新する方法はたくさんあります。この場合、<span>要素が作成され、textContentを使用してコンテンツが更新されます。
また、代わりにインラインイベントリスナーのaddEventListenerを使用：
var x = 0;
var span = document.querySelector('span'); // find the <span> element in the DOM
var increment = document.getElementById('increment'); // find the element with the ID 'increment'
var decrement = document.getElementById('decrement'); // find the element with the ID 'decrement'
increment.addEventListener('click', function() {
// this function is executed whenever the user clicks the increment button
span.textContent = x++;
});
decrement.addEventListener('click', function() {
// this function is executed whenever the user clicks the decrement button
span.textContent = x--;
});<button id="increment">increment</button>
<button id="decrement">decrement</button>
<span>0</span>他の人が述べたようにxの値がインクリメントされるので、第一x++は、目に見える効果はありませんの後に<span>の内容が更新されます。しかし、それはあなたの元の問題ではありませんでした。
問題は、あなたがそれを印刷した後、変数をデクリメント/インクリメントすることを意味し、後に変数を++と--を入れていることです。以下のように変数の前にを入れてみてください。
また、前述したように、document.write()にいくつかの問題があります。 W3Schools pageから次のドキュメントを考えてみましょう：
write()方法は 文書にHTML表現やJavaScriptコードを書き込みます。
write()の方法は、主にテストに使用されます。 HTML文書が完全に読み込まれた後に使用されると、既存のHTMLがすべて削除されます。
したがって、document.write()は、ボタンをクリックするとすぐに既存のコンテンツをすべて削除します。あなたは、ドキュメントに書き込みたい場合は、使用して、要素のこのような.innerHTML：
var x = 0;
document.getElementById('output-area').innerHTML = x;
function button1() {
document.getElementById('output-area').innerHTML = ++x;
}
function button2() {
document.getElementById('output-area').innerHTML = --x;
}<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<span id="output-area"></span>は、なぜあなたはあなたのコードビットを変更しないでください？ document.write(x++)とdocument.write(x--)の代わりにdocument.write(++x)とdocument.write(--x)を使用してください。
しかし、それは動作させません。 'document.write'を使わないでください。 – PeterMader
文書の書き込みは完全なhtmlを削除します： write（）メソッドは主にテストに使用されます.HTML文書が完全に読み込まれた後に使用される場合、既存のHTMLはすべて削除されます。代わりに
<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<div id="value"></div>
<script type="text/javascript">
var x=0
var element = document.getElementById("value");
element.innerHTML = x;
function button1(){
element.innerHTML = ++x;
}
function button2(){
element.innerHTML = --x;
}
</script>
私はx--を変更し、X ++に++ xと--x変更がすぐにあるので。As in w3schools
はこれを試しますこの変更により、あなたのコードもうまくいきました。 1または-1を示します。
いいえ、問題はポストインクリメントではありません。 'document.write'です。明示的に言いたいことはありますか？ – PeterMader
@PeterMaderは更新された答えを確認し、次に！ –