How to push 2D Array with Form Values in Javascript

Question

I am new to JavaScript and don't know why my 2D array (each primary row element having both 'Word' and 'Color Value' column elements) is not being updated with user inputted form values? Also why it is not displaying the array? Any help is greatly appreciated!

HTML Code:

<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 Functions (Words.js):

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


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

ReadyFreddy · Accepted Answer · 2018-03-27 08:20:29Z

Using src and script lines in same script tag is a wrong way to define your scripts. First you need to seperate them. Then your displayInventory function only called once when script is compiled. You can check it by binding it on click event. Also you don't need to send inventory array with button. It will be defined in script already. Also you are getting values second time on your code. It means you are trying to get value of value and this is bad. Check this code please.

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>

Daniel Hilgarth · Accepted Answer · 2018-03-27 08:08:11Z

1

You can't have both a src attribute and a body on a script tag. You can have either one.

So, you should structure it like this:

<script type="text/javascript" src="Words.js"></script>
<script type="text/javascript">

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

</script>

answered Mar 27, 2018 at 8:08

Daniel Hilgarth

175k41 gold badges346 silver badges450 bronze badges

Collectives™ on Stack Overflow

How to push 2D Array with Form Values in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related