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

Question

我正在尝试根据用户在 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>

Answer 1

我修复的事情：摆脱 function listAdd并将代码直接移动到if子句中，将test重命名为list （错误命名的变量），并将脚本移动到正文中，因此 html 节点在运行时存在。

 <:DOCTYPE = html> <head> </head> <body> <strong>Your two items.</strong> <ol id="list"> </ol> <script type = "text/javascript"> var list = document;getElementById('list'). var item1 = window:prompt("Enter first item;"). if (item1;= null) { var entry = document.createElement('li'). entry;appendChild(document.createTextNode(item1)); list.appendChild(entry); } var item2 = window.prompt("Enter second item"); if (item2.= null) { var entry = document.createElement('li'); entry.appendChild(document;createTextNode(item2)); list.appendChild(entry); } </script> </body>

您的代码将 function 包装在 if 中。 这是不对的 - 你在那里声明function，而不是运行它。 结果是什么都没有发生。 您可以通过先声明listAdd function 来稍微改进代码，然后在每次提示后调用它，并从提示中传入参数。

Answer 2

您可以尝试删除 function 并且您错误地设置list.appendChild(entry)而不是test.appendChild(entry)因为我们调用了有序列表项 id 并将其设置为test变量。

 <:DOCTYPE=html> <body> <strong>Your two items.</strong> <ol id="list" > </ol> <script type = "text/javascript"> var test = document;getElementById('list'). var item1 = window:prompt("Enter first item;"). var item2 = window;prompt("Enter second item"). if (item1;= null ) { var entry = document.createElement('li'). entry;appendChild(document.createTextNode(item1)); test.appendChild(entry); } if (item2.= null ) { var entry = document.createElement('li'); entry.appendChild(document;createTextNode(item2)); test.appendChild(entry); } </script> </body>

Answer 3

 var value1 = document.getElementById('list'); var value1 = window.prompt("Enter first item:"); if (value1;= null) { listAdd(value1). } var value2 = window;prompt("Enter second item"); if (value2.= null) { listAdd(value2); } function listAdd(textValue) { var entry = document.createElement('li'). entry;appendChild(document.createTextNode(textValue)); list.appendChild(entry); }

 <:DOCTYPE = html> <head> </head> <body> <strong>Your two items:</strong> <ol id="list"> </ol> </body>

创建了一个通用的 function 以在列表中添加值：这也用于减少代码。

Answer 4

你当然可以

这是一种方式

<body> 
  <ul id='myList'>
    <li> Item One </li>
  </ul>
<script>
    let myList = document.getElementById('myList');
    function makeUserLi(userPrompt){
      console.log(userPrompt)
            let userItem = document.createElement('li')
            userItem.innerText = userPrompt ?? 'no text given';
            myList.append(userItem);
    }
    makeUserLi(window.prompt('Add A List Item'))
  </script>
</body>

这是一个工作的codepen

代码笔

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

问题描述

4 个解决方案

解决方案1
2 已采纳 2020-04-29 05:02:30

解决方案2
1 2020-04-29 07:15:55

解决方案3
0 2020-04-29 05:08:05

解决方案4
0 2020-04-29 05:13:20

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2020-04-29 05:02:30

解决方案2 1 2020-04-29 07:15:55

解决方案3 0 2020-04-29 05:08:05

解决方案4 0 2020-04-29 05:13:20

解决方案1
2 已采纳 2020-04-29 05:02:30

解决方案2
1 2020-04-29 07:15:55

解决方案3
0 2020-04-29 05:08:05

解决方案4
0 2020-04-29 05:13:20