Javascript 用户输入列表使用HTML加上处理信息的方法_Javascript_Html_Input

Javascript 用户输入列表使用HTML加上处理信息的方法

javascript html input

Javascript 用户输入列表使用HTML加上处理信息的方法,javascript,html,input,Javascript,Html,Input,我正在尝试为工作中的一些事情运行一个简单的代码——我和我的同事将列出一个歌曲列表。因此，使用看似简单的HTML编码，我成功地实现了以下目标： <!DOCTYPE html> <html> <body> <form action="list"> Band Name:<br> <input type="text" name="BandName"> <br> Song Name:<br> <inpu

我正在尝试为工作中的一些事情运行一个简单的代码——我和我的同事将列出一个歌曲列表。因此，使用看似简单的HTML编码，我成功地实现了以下目标：

<!DOCTYPE html>
<html>
<body>

<form action="list">
Band Name:<br>
<input type="text" name="BandName">
<br>
Song Name:<br>
<input type="text" name="SongName">
<br><br>
<input type="submit">
</form>

</body>
</html>


波段名称：



歌曲名称：

这可以很好地创建用于用户输入的按钮和框。但我仍然不知道如何处理这些信息。理想的结果是，当用户在操作页面的列表中放置输入时，可以将名称附加到列表中。那可能吗？顺便说一句，我正试图在谷歌网站的HTML框中实现这一点

编辑：

在一些帮助下，我能够在上运行以下代码：

///HTML///
乐队/艺术家：



音乐：





////JAVASCRIPT//////
//为按钮定义侦听器，特别是onclick处理程序
document.getElementById（“add”）.onclick=function（）{
//首先，我们需要我们的文本：
var text=document.getElementById（“idea”）.value；//.value获取输入值
var text2=document.getElementById（“idea2”）.value；//.value获取输入值
//现在构造一个快速列表元素
var节点=document.createElement（“li”）；
var textnode=document.createTextNode（text+“-”+text2）；
node.appendChild（textnode）；
//现在使用appendChild并将其添加到列表中！
document.getElementById（“列表”）.appendChild（节点）；

（代码部分来自于TymeVM在中的回答，但似乎有点问题）

它工作正常。但我无法在谷歌网站的页面上运行它。有可能吗？如果没有，你们知道更好的选择吗？

由于我的版本似乎回答了我的问题，我将把它也作为一个答案发布。请随意添加任何建议

下面的代码，加上Javascript，为上面的第一个问题生成了所需的答案

///HTML///
乐队/艺术家：



音乐：





////JAVASCRIPT//////
//为按钮定义侦听器，特别是onclick处理程序
document.getElementById（“add”）.onclick=function（）{
//首先，我们需要我们的文本：
var text=document.getElementById（“idea”）.value；//.value获取输入值
var text2=document.getElementById（“idea2”）.value；//.value获取输入值
//现在构造一个快速列表元素
var节点=document.createElement（“li”）；
var textnode=document.createTextNode（text+“-”+text2）；
node.appendChild（textnode）；
//现在使用appendChild并将其添加到列表中！
document.getElementById（“列表”）.appendChild（节点）；

（正如上面问题的版本中所指出的，代码部分来自于TymeVM在中的回答，但它没有起作用）

但似乎仍然没有在谷歌网站上运行。我不知道是否应该为这个问题创建另一个问题。

请详细说明“在谷歌网站页面上运行”的确切含义。我无法在HTML框中或在HTML源代码选项中运行代码（此外，我确实在HTML和javascript中的代码之间添加了

）。我缺少什么？这是一个打字/粘贴问题，还是在每一个之后都没有一个结束标记？

和

标记？谢谢你，马克！我仍然有同样的问题，尽管我认为代码是正确的。问题似乎出在谷歌网站上。代码生成输入空格和按钮，但它不会生成带有I的列表NPUT。

    ////HTML///
    <form>
      Band/Artist:<br>
    <input type='text' id='idea' />
        <br>
      Music:<br>
    <input type='text' id='idea2' />
            <br><br>
    <input type='button' value='Adicione' id='add' />
    <ul id='list'></ul>

<script type="text/javascript">    

    ////JAVASCRIPT//////

    //Defining a listener for our button, specifically, an onclick handler
    document.getElementById("add").onclick = function() {
        //First things first, we need our text:
        var text = document.getElementById("idea").value; //.value gets input value
        var text2 = document.getElementById("idea2").value; //.value gets input value
        //Now construct a quick list element
        var node = document.createElement("li"); 
        var textnode = document.createTextNode(text+" - "+text2);
        node.appendChild(textnode); 
        //Now use appendChild and add it to the list!
        document.getElementById("list").appendChild(node);

 ////HTML///
    <form>
      Band/Artist:<br>
    <input type='text' id='idea' />
        <br>
      Music:<br>
    <input type='text' id='idea2' />
            <br><br>
    <input type='button' value='Adicione' id='add' />
    <ul id='list'></ul>

   <script type="text/javascript">

    ////JAVASCRIPT//////

    //Defining a listener for our button, specifically, an onclick handler
    document.getElementById("add").onclick = function() {
        //First things first, we need our text:
        var text = document.getElementById("idea").value; //.value gets input value
        var text2 = document.getElementById("idea2").value; //.value gets input value
        //Now construct a quick list element
        var node = document.createElement("li"); 
        var textnode = document.createTextNode(text+" - "+text2);
        node.appendChild(textnode); 
        //Now use appendChild and add it to the list!
        document.getElementById("list").appendChild(node);