javascript - 如何在 Javascript 中使用表单值推送 2D 数组

标签 javascript html arrays forms

我是 JavaScript 新手,不知道为什么我的 2D 数组(每个主行元素都包含“Word”和“颜色值”列元素)没有使用用户输入的表单值进行更新?另外为什么它不显示数组? 非常感谢任何帮助!

HTML 代码:

<html>
    <head>
        Your current list of words to search:
        <p id = "Array"> </p>
    </head>

    <body>

    <form>
        Input Word:<br><br>
        <input type="text" id="wordInputId" ><br>

        <br> Highlight Color: <select name="colortype" id="colorTypeId">
        <br>
        <br>
        <option value="1">Blue</option>
        <option value="2">Green</option>
        <option value="3">Red</option>
        <option value="4">Yellow</option>
        </select>
        <br/>
        <br/>
        <input type="button" name="submit" value="Add Word" onclick="addEntry(   inventory, document.getElementById('wordInputId').value, document.getElementById('colorTypeId').value )"/>
    </form>

    <br>

    <button> Search Page</button>

    <script src="Words.js">

        var inventory = [[]];
        displayInventory(inventory);

    </script>

    </body>
</html>

JS 函数 (Words.js):

function displayInventory(inventory){
    document.getElementById("Array").innerHTML = inventory.toString();
}


function addEntry(inventory, word, color){
    inventory.push([[word.value],[color.value]]);
    //displayInventory(inventory);
}

最佳答案

在同一脚本标记中使用 src 和脚本行是定义脚本的错误方法。首先你需要将它们分开。然后,您的 displayInventory 函数仅在编译脚本时调用一次。您可以通过将其绑定(bind)到单击事件来检查它。此外,您不需要使用按钮发送 inventory 数组。它已经在脚本中定义了。此外,您还可以在代码中第二次获得values。这意味着你正在试图获得值(value),这是不好的。请检查此代码。

var inventory = [[]];
function displayInventory(inventory){
    document.getElementById("Array").innerHTML = inventory.toString();
}
function addEntry(word, color){
    inventory.push([[word],[color]]);
    displayInventory(inventory);
}
<html>
<head>

</head>   
    <body>
    Your current list of words to search:
    <p id = "Array"> </p>
    <form>
        Input Word:<br><br>
        <input type="text" id="wordInputId" ><br>
        <br> Highlight Color: <select name="colortype" id="colorTypeId">
        <br>
        <br>
        <option value="1">Blue</option>
        <option value="2">Green</option>
        <option value="3">Red</option>
        <option value="4">Yellow</option>
        </select>
        <br/>
        <br/>
        <input type="button" name="submit" value="Add Word" onclick="addEntry(document.getElementById('wordInputId').value, document.getElementById('colorTypeId').value)"/>
    </form>
    <br>
    <button> Search Page</button>
    </body>
</html>

关于javascript - 如何在 Javascript 中使用表单值推送 2D 数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49507512/

相关文章:

javascript - 如何提高 JavaScript 编程创造力

javascript - css 和 jquery 缺少元素背景颜色

javascript - 如何使用JS复制文本并粘贴到文本区域?

android - 在android的SurfaceView上渲染字节数组

javascript - 在断点处保持调用堆栈关闭

javascript - 如何使用此代码在单片眼镜电子书阅读器中制作下一个和上一个按钮?

html - CSS 每隔一个 LI 元素,但两个成对

javascript - 求和特定数组值取决于其他数组的索引值列表

javascript - 使用 Angular.js/JavaScript 对两个数组值进行排序并按日期合并

javascript - 表 (.animate) 的 Jquery 问题