Question

我是编程新手。每次运行此代码时，都没有任何反应。你能告诉我为什么会这样吗？

<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>

Answer 1

问题是您在变量之后放置了++和-- ，这意味着它会在打印后增加/减少变量。尝试将放在变量之前，如下所示。

另外，如上所述，您在使用document.write()时遇到了一些问题。请考虑W3Schools page中的以下文档：


write()方法将HTML表达式或JavaScript代码写入a   文档。

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>

Answer 2

为什么不稍微改变你的代码？而不是document.write(x++)和document.write(x--)使用document.write(++x)和document.write(--x)。

Answer 3

文件写入将删除完整的html： write（）方法主要用于测试：如果在HTML文档完全加载后使用它，它将删除所有现有的HTML。 As in 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。

Answer 4

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的值在 <span>的内容后递增 }已更新。但这不是你原来的问题。

Answer 5

UI的HTML代码

<div class="card">
      <div class="card-body">
       <h5 class="card-title">How many guests can stay?</h5>
       <div class="row">
       <ul class="guestCounter">
          <li data-btn-type="increment"><span class="romoveBtn"><i class="fa fa-plus"></i></span> </li>
          <li class="counterText"><input type="text" name="guestCount" id="btnGuestCount" value="1" disabled /> </li>
        <li data-btn-type="decrement"><span class="romoveBtn"><i class="fa fa-minus"></i></span></li>
       </ul>
  </div>

Java脚本：

// set event for guest counter
$(".guestCounter li").on("click", function (element) {
    var operationType = $(this).attr("data-btn-type");
    //console.log(operationType);
    var oldValue = $(this).parent().find("input").val();
    //console.log(oldValue);

    let newVal;
    if (operationType == "increment") {
         newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
             newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }
    $(this).parent().find("input").val(newVal);
});

单击时如何使按钮增加和减少值？

5 个答案: