document.getElementById.innerHTML 无法正常工作

document.getElementById.innerHTML is not working correctly?

本文关键字：工作 常工作 getElementById innerHTML document      更新时间：2023-09-26

我过去一直在使用它，没有任何问题。这次我似乎想不通出了什么问题;也许我只需要第二双眼睛。

这是我的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";
}

显然，我使用"嗨"作为测试。当我打开网站时，它没有显示我的光标在 p id="result" 中的位置。任何建议不胜感激。

编辑：我知道它说document.getElementById("result").innerText = "hi";，但我也用.innerHTML试过，但仍然一无所获。

您看到此问题是因为您使用的是内联事件处理程序。内联事件处理程序的范围有点棘手。

长话短说：你根本没有调用你的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>

可以通过重命名函数或不使用内联事件处理程序来解决此问题。

旁注：Firefox 不支持innerText。

试试这个

将您的函数名称更改为其他，然后提交例如 submit2（）：

<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="submit2()" value="Submit Form">
    <input type="button" onclick="reset()" value="Reset Form"><br>
    <p id="result"> </p>
</form>

<script type="text/javascript">
    function submit2(){
        document.getElementById("result").innerHTML = "hi";
    } 
</script>

我希望这对你有所帮助。

相关文章：