0

有人可以为我解释一些方法来改变它以实际添加数字吗？我是编码新手，也使用记事本，所以它不会给我语法错误。

我的 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>
4

4 回答 4

2

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

于 2013-10-02T23:37:41.320 回答
1

我自己的看法是：

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']（W3C 方法或 MS 方法）是为了避免意外拾取任何可能已附加到元素的序列化 HTML 元素'test'。

顺便说一句，这一行：

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 小提琴演示。

或者：

// 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 小提琴演示。

于 2013-10-02T23:41:00.800 回答
1

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

首先，您的 html 必须在 JavaScript 可以使用之前存在。浏览器将从上到下加载页面元素，因此无需任何巧妙的技巧，您的 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 函数的目的是将您的文本转换为可以添加到其他数字的实际数字。当您将新号码放回 innerHTML 时，它会再次转换回文本。

于 2013-10-02T23:43:16.050 回答
0 
<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>

每次单击按钮时，这将增加值

于 2013-10-02T23:45:24.950 回答