How to change the content of the paragraph tag when button is clicked with JavaScript
Question
I want something like this I love Pizza
I love Beans
I love Tacos
I love Fish
I love Chicken
and here is my code it is just printing I love chicken:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="displayFood()">Show Food</button>
<p id="food"></p>
<script>
function displayFood() {
var text;
var food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"];
var i;
for(i = 0; i <food.length;i++) {
text = "I love " + food[i] + "<br>";
document.getElementById("food").innerHTML = text;
}
}
</script>
3 answers
solution1
2 2018-05-11 06:41:29
You can also do it like that
function displayFood() { var food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"]; var text = ''; food.forEach(function(el){ document.getElementById("food").innerHTML = text+= 'I love ' + el + '</br>'; }); } //document.querySelector('.show').addEventListener('click', displayFood);
<button class="show" onClick="displayFood()">Show Food</button> <p id="food"></p>
solution2
1 2018-05-11 06:37:07
Just a little bit of modification will do.
You need to assign an initial value to text like this var text = "" (an empty string).
Then you need to move document.getElementById("food").innerHTML = text; outside of the loop so you don't overwrite it each time (or you can use += instead of = and keep it inside of loop).
Last thing, you can move declaration of i to the loop header and I would recommend using let and const keywords to declare variables instead of var .
function displayFood() { let text = ""; // give it an initial value const food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"]; for(let i = 0; i < food.length; i++) { text += "I love " + food[i] + "<br>"; } // move the assignment outside of loop document.getElementById("food").innerHTML = text; }
<button onclick="displayFood()">Show Food</button> <p id="food"></p>
And you don't even need an explicit loop to achieve this task. All you need is Array.prototype.reduce and then you can do something like this.
function displayFood() { const food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"]; document.getElementById("food").innerHTML = food.reduce((acc, v) => acc + "I love " + v + "<br>", ""); }
<button onclick="displayFood()">Show Food</button> <p id="food"></p>
solution3
1 2018-05-11 06:38:00
<!DOCTYPE html> <html> <head> </head> <body> <button onclick="displayFood()">Show Food</button> <p id="food"></p> <script> function displayFood() { var text = ""; //asign empty string to text var food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"]; var i; for(i = 0; i <food.length;i++) { text += "I love " + food[i] + "<br>"; document.getElementById("food").innerHTML = text; } } /* This will output as follows: I love Pizza I love Beans I love Tacos I love Fish I love Chicken */ </script>
Here is the correct code
<!DOCTYPE html> <html> <head> </head> <body> <button onclick="displayFood()">Show Food</button> <p id="food"></p> <script> function displayFood() { var text = ""; //asign empty string to text var food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"]; var i; for(i = 0; i <food.length;i++) { text += "I love " + food[i] + "<br>"; document.getElementById("food").innerHTML = text; } } </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.