时间戳

首页 > 解决方案 > 使用 JavaScript 单击按钮时如何更改段落标记的内容

javascript - 使用 JavaScript 单击按钮时如何更改段落标记的内容

问题描述

我想要这样的东西 我喜欢披萨

我爱豆子

我爱炸玉米饼

我爱鱼

我爱鸡

这是我的代码，它只是打印我喜欢鸡肉：

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

标签： javascripthtml

解决方案

你也可以这样做

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>

推荐阅读