通过 JavaScript 和 window.prompt() 添加列表项
[英]Adding a list item through JavaScript with window.prompt()
问题描述
I'm trying to add ordered list items depending on what a user enters in window.prompt().
我正在尝试根据用户在 window.prompt() 中输入的内容添加有序列表项。 Is this possible?这可能吗？
Below is my code.下面是我的代码。 Sorry if this is messy, I'm fairly new to this.抱歉，如果这很混乱，我对此很陌生。 Any help is appreciated!任何帮助表示赞赏！
<.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>4 个解决方案
解决方案1
2 已采纳 2020-04-29 05:02:30
Things I fixed: got rid of the function listAdd and moved the code directly into the if clause, renamed test as list (misnamed variable), and moved the script into the body so the html nodes exist when it runs.我修复的事情：摆脱 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> Your code wraps a function in an if.您的代码将 function 包装在 if 中。 That's not right - you are declaring the function there, not running it.这是不对的 - 你在那里声明function，而不是运行它。 The result is that nothing happens.结果是什么都没有发生。 You could improve the code a little by declaring the listAdd function first, then calling it after each prompt, passing in the parameter from the prompt.您可以通过先声明listAdd function 来稍微改进代码，然后在每次提示后调用它，并从提示中传入参数。
解决方案2
1 2020-04-29 07:15:55
You can try removing the function and you mistakenly set list.appendChild(entry) instead of test.appendChild(entry) because we called the ordered list item id and set it to the test variable.您可以尝试删除 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>
解决方案3
0 2020-04-29 05:08:05
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>
Created a generic function to add values in the List: This is also used to reduce code.创建了一个通用的 function 以在列表中添加值：这也用于减少代码。
解决方案4
0 2020-04-29 05:13:20
Sure you can你当然可以
This is one way这是一种方式
<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>
Here is a working codepen这是一个工作的codepen
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.