您如何制作添加数字的按钮

Question

有人可以为我解释一些更改此方法以实际添加数字的方法吗？ 我是编码和使用记事本的新手，因此不会给我语法错误。

我的JavaScript：

function street() {
    var x=Math.floor(Math.random()*2 + 1);
    var z=document.getElementById("test")
    if (x == 1) {
        alert('This should add 1');
        z.innerhtml = z + 1
    }
    else if (x == 2) {
        alert('This should add 2');
        z.innerhtml = z + 1;
    }
}

而我的HTML：

<p>Adding</p>`
<p id="test">0</p>
<button type = "button" onclick "street()">Add</p>

Answer 1

z.innerHTML = parseInt(z.innerHTML) + 1; // or 2 z.innerHTML = parseInt(z.innerHTML) + 1; // or 2 。 您在单击之后就错过了= （以及已经指出的许多其他语法疏忽）。

Answer 2

我自己的看法是：

function street() {
    var x = Math.floor(Math.random()*2 + 1),
        z = document.getElementById("test"),
        // parses the text of the element, turning it into a base-10 number:
        n = parseInt(z['textContent' || 'innerText'], 10);

    // sets the text of the element to be the sum of
    // the current number + generated number:
    z['textContent' || 'innerText'] = n + x;
}

JS小提琴演示 。

使用parseInt()的原因是因为+运算符会将两个数字加在一起或将两个字符串连接在一起。 如果您混合使用字符串和数字，则数字的类型将被强制为字符串，并且为'1' + 2 > '12' 。

因此：

1 + 2 // 3
'1' + '2' // '12'
'1' + 2 // '12'
1 + '2' // '12'

我对['textContent' || 'innerText'] ['textContent' || 'innerText'] （W3C方法或MS方法）是为了避免意外拾取可能附加到'test'元素的任何序列化HTML元素。

顺便说一句，这行：

var z=document.getElementById("test")

查找一个DOM节点，而不是一个字符串； 要查找 DOM节点中包含的字符串，您需要使用textContent ， innerText或innerHTML （后者是最简单的跨浏览器，并且最兼容，但是如果数字包装在任何子元素中都将失败）。

我还建议您不要使用干扰性的JavaScript，而是将事件处理程序绑定到HTML之外（这使以后的修改变得更加容易，因为通过onclick事件处理程序来查找函数调用的方式更少了）； 在第一个实例中，这涉及为button一个id ，以通过该id进行选择：

// getting a reference to the DOM node:
var button = document.getElementById('button');

// binding the function to the event of the button being clicked:
button.onclick = street;

JS小提琴演示 。

或者：

// get all the button elements:
var buttons = document.getElementsByTagName('button'),
    // select the first of those elements:
    button = buttons[0];

button.onclick = street;

JS小提琴演示 。

首选（在实现DOM级别2和/或3的现代浏览器中）：

var buttons = document.getElementsByTagName('button'),
    button = buttons[0];

button.addEventListener('click', street);

JS小提琴演示 。

Answer 3

我还记得刚接触编码的时候。 这里有很多问题。

首先，您的HTML必须存在，JavaScript才能使用它。 浏览器将从上到下加载页面元素，因此，没有任何巧妙的技巧，您的JavaScript就必须位于html之下。

其次，在JavaScript世界中，onclick属性在某种程度上是不能拒绝的，因为它的工作方式实际上效率很低。 实际上，您可以通过JavaScript更好地处理它。

然后就是实际的代码错误。 外观如下：

<p>Adding</p>
<p id="test">0</p>
<button id="mybutton" type="button">Add</button>

然后最好将JavaScript放入自己的文件中，但是如果您将其放在页面上，则可以执行以下操作：

<script>
function street() {
    var x=Math.floor(Math.random()*2 + 1);
    var z=document.getElementById("test");
    if (x === 1) {
        alert('This should add 1');
        z.innerHTML = parseInt(z.innerHTML) + 1;
    }
    else if (x === 2) {
        alert('This should add 2');
        z.innerHTML = parseInt(z.innerHTML) + 2;
    }
}

document.getElementById('mybutton').onclick = street;
</script>

编辑：

就添加数字而言，拔出一些innerHTML时，它始终是文本形式。 当您尝试在文本中添加文本或在文本中添加数字时，总是会收到文本。 因此，例如，“ 4” + 2等于“ 42”，而“ 4” +“ 2”也等于“ 42”。 parseInt函数的作用是将您的文本转换为可以添加到其他数字的ACTUAL数字。 当您将新数字放回innerHTML时，它将再次转换回文本。

Answer 4

<script>
  function street() {
    var x = Math.floor((Math.random() * 2) + 1),
        el = document.getElementById('test'),
        val = parseInt(el.innerHTML, 10);
    el.innerHTML = val + x;
  }
</script>
<p>Adding</p> 
<p id="test">0</p> 
<button type="button" onclick="street()">Add</button>

每次您单击按钮时，它将增加该值