单击按钮时显示段落

编程问答 2022-05-24

问题描述

预期输出：

我正在尝试向按钮添加功能，当单击按钮时，它会在 textArray 中显示列表的内容。然而，当这个按钮被重复按下时，列表应该被重复渲染。例如，如果 KNow More 按钮被按下三次，那么列表应该在另一个下方显示三次。请参阅上图了解预期输出。

我在 JS 文件中创建了 addlistofEvents 函数，但是，单击按钮时没有任何反应。

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8" />
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Adding HTML with Javascript</title>
    <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
</head>
<body>
    <h1>Solar Sytsem</h1>
    <p>The Solar System[a] is the gravitationally bound system of the planets and the Sun plus other objects that orbit it,either directly or indirectly.[b] Of the objects that orbit the Sun directly,the largest eight are the planets,with 
        the remainder being smaller objects,such as dwarf planets and small Solar System bodies. Of the objects that orbit the Sun 
        indirectly,the moons,two are larger than the smallest planet,Mercury.The Solar System formed 4.6 billion years ago from the 
        gravitational collapse of a giant interstellar molecular cloud. </p>
    <p>The solar system comprises of eight planets</p>
    <button id="addList" onclick="addlistofEvents()">KNow More</button>
    <div id="addEventNames"></div>
    <script src="index.js"></script> 
</body>
</html>

下面是JS文件中的代码：

var textArray = 
["Mercury: It is the closest planet to the Sun,and second smallest planet in the solar system.","Venus: It is the second planet in the solar system.","Earth: Our planet earth is the third planet in the solar system.","Mars: It is the fourth planet from the Sun and is commonly referred to as the Red Planet.","Jupiter: It is the fifth planet from the Sun and is the largest planet in the solar system.","Saturn: It is the sixth planet from the Sun and is the second largest in the solar system.","Uranus: It is the seventh planet from the Sun and is the third largest in the solar system.","Neptune: It is the outermost planet of the solar system.",];

function addlistofEvents() {
    textArray.forEach(function(value,index) {
        let addEventNames ='<ul>' + '<li>' +value.name+ '</li>' + '</ul>';
        document.getElementById('addEventNames').innerHTML = addEventNames;
        
    })
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

buttonbuttonbuttoncollapsedomjavascript