猿问

使用 window.prompt() 通过 JavaScript 添加列表项

我正在尝试根据用户在 window.prompt() 中输入的内容添加有序列表项。这可能吗？


下面是我的代码。抱歉，如果这很混乱，我对此很陌生。任何帮助表示赞赏！


 <!DOCTYPE = html>

 <head>

 <script type = "text/javascript">

    var test = document.getElementById('list');

    var item1 = window.prompt("Enter first item:");

      if (item1 != null) {

        function listAdd() {

          var entry = document.createElement('li');

          entry.appendChild(document.createTextNode(item1));

          list.appendChild(entry);

        }

    }


    var item2 = window.prompt("Enter second item");

      if (item2 != null) {

        function listAdd() {

          var entry = document.createElement('li');

          entry.appendChild(document.createTextNode(item2));

          list.appendChild(entry);

        }

      }  

  </script>

 </head>

 

 <body>

  <strong>Your two items:</strong>

    <ol id="list">

    </ol>

 </body>


偶然的你
浏览 148回答 3
3回答

qq_花开花谢_0

我修复的事情：摆脱函数listAdd并将代码直接移动到if子句中，重命名test为list（错误命名的变量），并将脚本移动到正文中，以便在运行时存在 html 节点。&nbsp;<!DOCTYPE = html>&nbsp;<head>&nbsp;</head>&nbsp;&nbsp;<body>&nbsp; <strong>Your two items:</strong>&nbsp; &nbsp; <ol id="list">&nbsp; &nbsp; </ol>&nbsp;<script type = "text/javascript">&nbsp; &nbsp; var list = document.getElementById('list');&nbsp; &nbsp; var item1 = window.prompt("Enter first item:");&nbsp; &nbsp; &nbsp; if (item1 != null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var entry = document.createElement('li');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; entry.appendChild(document.createTextNode(item1));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list.appendChild(entry);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; var item2 = window.prompt("Enter second item");&nbsp; &nbsp; &nbsp; if (item2 != null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var entry = document.createElement('li');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; entry.appendChild(document.createTextNode(item2));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list.appendChild(entry);&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; </script>&nbsp;</body>您的代码将函数包装在 if 中。这是不对的——你是在那儿声明函数，而不是运行它。结果是什么都没有发生。您可以通过先声明函数来稍微改进代码listAdd，然后在每次提示后调用它，并从提示中传递参数。
0

茅侃侃

您可以尝试删除该函数并错误地设置list.appendChild(entry)而不是test.appendChild(entry)因为我们调用了有序列表项 id 并将其设置为test变量。<!DOCTYPE=html><body>&nbsp; <strong>Your two items:</strong>&nbsp; <ol id="list" >&nbsp; </ol>&nbsp; <script type = "text/javascript">&nbsp; &nbsp; &nbsp; var test = document.getElementById('list');&nbsp; &nbsp;var item1 = window.prompt("Enter first item:");&nbsp; &nbsp; var item2 = window.prompt("Enter second item");&nbsp; &nbsp; &nbsp;if (item1 != null ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var entry = document.createElement('li');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; entry.appendChild(document.createTextNode(item1));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test.appendChild(entry);&nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;if (item2 != null ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var entry = document.createElement('li');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; entry.appendChild(document.createTextNode(item2));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test.appendChild(entry);&nbsp; &nbsp;}</script></body>
0

跃然一笑

&nbsp; &nbsp;var value1 = document.getElementById('list');&nbsp; &nbsp; var value1 = window.prompt("Enter first item:");&nbsp; &nbsp; &nbsp; if (value1 != null) {&nbsp; &nbsp; &nbsp; &nbsp; listAdd(value1);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; var value2 = window.prompt("Enter second item");&nbsp; &nbsp; &nbsp; if (value2 != null) {&nbsp; &nbsp; &nbsp; &nbsp; listAdd(value2);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;function listAdd(textValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var entry = document.createElement('li');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; entry.appendChild(document.createTextNode(textValue));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list.appendChild(entry);&nbsp; &nbsp; &nbsp; &nbsp; }<!DOCTYPE = html>&nbsp;<head>&nbsp;</head>&nbsp;&nbsp;<body>&nbsp; <strong>Your two items:</strong>&nbsp; &nbsp; <ol id="list">&nbsp; &nbsp; </ol>&nbsp;</body>创建了一个通用函数来在列表中添加值：这也用于减少代码。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答