javascript - document.getElementById.innerHTML 工作不正常？

Question

我过去一直使用它，没有任何问题。这次我似乎无法弄清楚出了什么问题；也许我只需要另一双眼睛。

这是我的 HTML 代码:

<form id="myForm">
    <table>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>2014 HK Army Hardline Paintball Jersey</td>
            <td>$89.95</td>
        </tr>
        <tr>
            <td>Planet Eclipse 2013 Distortion Gloves</td>
            <td>$34.95</td>
        </tr>
        <tr>
            <td>Eclipse Geo 3.5 Paintball Marker</td>
            <td>$1,600.00</td>
        </tr>
    </table>
    <p>How many Paintball Jerseys would you like to order?</p>
    <input id="jersey" type="number" value="0">
    <p>How many Paintball Gloves would you like to order?</p>
    <input id="gloves" type="number" value="0">
    <p>How many Paintball Markers would you like to order?</p>
    <input id="marker" type="number" value="0"><br>
    <input type="button" onclick="submit()" value="Submit Form">
    <input type="button" onclick="reset()" value="Reset Form"><br>
    <p id="result"> </p>
</form>

还有我的 JavaScript 代码:

function submit() {
    document.getElementById("result").innerText = "hi";
}

显然我使用“hi”作为测试。当我打开网站时，它没有显示我的光标在 p id="result"中的位置。任何建议表示赞赏。

编辑:我知道它说 document.getElementById("result").inner<strong>Text</strong> = "hi"; , 但我已经用 .innerHTML 试过了以及仍然没有。

Answer 1

您看到此问题是因为您正在使用内联事件处理程序。 The scope of inline event handlers is a bit tricky .

长话短说:您没有调用您的 submit功能。

<form> 的方法DOM 元素在内联事件处理程序的范围内。所以在事件处理程序中，submit不是在引用您的用户定义函数，它是在引用并调用 myForm.submit , 从而提交表单。

您可以通过与 document.getElementById('myForm').submit 进行比较轻松地进行测试(检查控制台)。

function submit() {
    // doesn't matter what's here  
}

<form id="myForm">
    <input type="button" onclick="console.log('DOM element submit', submit === document.getElementById('myForm').submit);" value="Click me!">
</form>

您可以通过 renaming the function 解决这个问题或 not using inline event handlers .

---

旁注: innerText is not supported by Firefox .