Вопрос:
Я новичок в программировании. Каждый раз, когда я запускаю этот код, ничего не происходит. Не могли бы вы рассказать мне, почему это так?
<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 выполняется до того, как страница полностью загрузится. Вот почему вы должны видеть 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++ не будет иметь видимого эффекта, потому что значение x увеличивается после обновления содержимого <span>. Но это была не твоя оригинальная проблема.
Ответ №1
Проблема в том, что вы ставите ++ и — после переменной, что означает, что она будет увеличивать/уменьшать переменную после ее печати. Попробуйте поместить его перед переменной, как показано ниже.
Кроме того, как уже упоминалось, у вас есть некоторые проблемы с document.write(). Рассмотрите следующую документацию со страницы W3Schools:
Метод 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>Ответ №2
Почему бы вам не изменить свой код? Вместо document.write(x++) и document.write(x—) используйте document.write(++x) и document.write(—x).
Ответ №3
document write удалит полный html: метод write() в основном используется для тестирования: если он используется после полной загрузки HTML-документа, он удалит весь существующий HTML. Как и в w3schools
попробуйте это вместо этого
<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, чтобы изменения были немедленно. С этим изменением ваш код тоже сработает. показывая 1 или -1.
