将JavaScript变量传递到HTML

Question

My JavaScript code is:

<script type="text/javascript">
     var current = 0;
var cars = new Array(5);
cars[0] = "Audi";
cars[1] = "Bentley";
cars[2] = "Mercedes";
cars[3] = "Mini";
cars[4] = "BMW";
document.getElementById("addCarBtn").onclick = function () {
    if (!(current > cars.length - 1)) {
        document.getElementById("carsDiv").innerHTML += cars[current] + "<br />";
        current++;
    }
}
</script>

I want to display the value of each array item one by one on button click the div.

But when i click the button, the array[0] ie "Audi" is displayed but just for fraction of seconds. then it disappears and only the button is visible.

Answer 1

How about the every method?

cars.every( function(c) {
    alert("car: " + c);
});

Answer 2

You can use a loop like:-

for(var i=0; i< cars.length;i++)
{
alert(cars[i]);
}

//It will show alert 5 times. You'll need to click through ok to traverse all array elements. //I think it is what you're thinking, or have I interpreted it wrong.

// I'm assuming you're completely new to javascript then on your button write onclick="yourFuncName();"

function YourfuncName()
{
//Initailze your array here, like you have done or like kamituel has done
// then just print each array element one by one 
for(var i=0; i< cars.length;i++)
{
alert(cars[i]);
}

}

Answer 3

You're almost there. Since the JS code was located before the HTML, the button element still doesn't exist. Best just wrap the code with window.onload and it should work:

window.onload = function() {
    document.getElementById("addCarBtn").onclick = function() {
        if (!(current > cars.length - 1)) {
            document.getElementById("carsDiv").innerHTML += cars[current] + "<br />";
            current++;
        }
    }
};

Live test case .

Edit: just noticed your button doesn't have type. This means that some browsers might make it a submit button by default, which will cause a page reload. To avoid it, make it a plain button:

<button id="addCarBtn" type="button">