display data in blank array javascript. <div>

Question

So far I have been able to come up with something like this. And i have been able to send something to an array, but in the display, thats what i have not been able to achieve so far.

Hence i am asking, How do i display it?

<!doctype html>
<html>

<head>
    <script type=text/javascript>
    var array = [];

    function add_element_to_array() {
        array.push(document.getElementById("institution_name").value);
        array.push(document.getElementById("degree_obtained").value);
        array.push(document.getElementById("honors_acheieved").value);

        document.getElementById("institution_name").value = "";
        document.getElementById("degree_obtained").value = "";
        document.getElementById("honors_acheieved").value = "";
    }

function display_array()
{
    // Display array
}

    </script>
</head>
<title>Test Javascript</title>
<h1>Test JS</h1>

<body>
    <form name="xform" id="xform" method="post" action="samris.php" /> Institution Name:
    <input type="text" name="institution_name" id="institution_name" /> </br>
    Degree Obtained:
    <input type="text" name="degree_obtained" id="degree_obtained" />
    </br>
    Honors Achieved:
    <input type="text" name="honors_acheieved" id="honors_acheieved" />
    </br>
    </p>
    <input type="button" name="Add" id="add" value="add" onclick="add_element_to_array()" />
    </form>
    <div onload= display_array()>
    </div>
</body>

</html>

Answer 1

To display array:

function display_array(){
    var display = array.join('<br>');
    this.innerHTML = display; // only works if you call it inline (except onload).

    /* OR */

    // works everywhere when you add an id to the div except onload (see explanation below).
    document.getElementById('display').innerHTML = display;
}

/* ... in the HTML ... */
<div id="display"></div>

However you will still not able to display it in the div because of the onload=display_array() .

When the div is being loaded, display_array() will be called. However when it is being loaded, array is still empty because nothing has been added to it yet by onclick=add_element_to_array() .

To do that, you can call display_array() from within add_element_to_array() like so:

function add_element_to_array(){
    /*
      your code
    */

    display_array();
}

Alternatively, you need to remove the onclick and replace by addEventListener in your <script> . However, you will need to move your <script> tag to the bottom of your <body> tag or otherwise implement a function similar to jQuery's ready() .

display data in blank array javascript. <div>

Question

1 answers

solution1
0 2017-06-20 14:10:20

display data in blank array javascript. <div>

Question

1 answers

solution1 0 2017-06-20 14:10:20

solution1
0 2017-06-20 14:10:20