在空白数组javascript中显示数据。 <DIV>

时间:2017-06-20 13:55:07

标签: javascript

到目前为止,我已经能够想出这样的东西。我已经能够将某些东西发送到阵列,但在显示器中,这是迄今为止我无法实现的。

因此我在问,我如何展示它?

<!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>

1 个答案:

答案 0 :(得分:0)

显示数组:

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>

但由于div,您仍然无法在onload=display_array()中显示它。

加载div时,将调用display_array()。但是,在加载时,array仍为空,因为onclick=add_element_to_array()尚未添加任何内容。

为此,您可以在display_array()内拨打add_element_to_array(),如下所示:

function add_element_to_array(){
    /*
      your code
    */

    display_array();
}

或者,您需要移除onclick并替换addEventListener中的<script>。但是,您需要将<script>标记移至<body>标记的底部,或以其他方式实现类似于jQuery&{39} ready()的功能。