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。你在onclick之后错过了=（以及已经指出的许多其他语法疏忽）。

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

使用parseInt()的原因是因为+运算符将两个数字相加或连接两个字符串。如果您混合字符串和数字，则数字的类型被强制为字符串，'1' + 2＆gt; '12'。

因此：

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

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

顺便提一句，这一行：

var z=document.getElementById("test")

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

我还建议远离突破性的JavaScript，并将事件处理程序绑定到HTML之外（这使得将来的修改变得更容易，因为onclick事件处理程序可以减少对函数调用的修改）;在第一个例子中，这涉及给button 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 Fiddle demo

可替换地：

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

button.onclick = street;

JS Fiddle demo

优先（在实现DOM级别2和/或3的当代浏览器下）：

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

button.addEventListener('click', street);

JS Fiddle demo

Answer 3

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

首先，在JavaScript可以使用之前，你的html必须存在。浏览器将从上到下加载页面元素，因此，没有任何巧妙的技巧，您的JavaScript需要低于您的HTML。

其次，onclick属性在JavaScript世界中是一种禁忌，因为它的工作方式效率非常低。实际上，你可以通过实际的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>

每次单击按钮

时，这将增加值

如何制作一个添加数字的按钮

4 个答案: