我怎样才能在显示器上得到结果

Question

我试着制作表格，但当我无法让用户输入显示在我的网站上时遇到了问题，这让我压力很大，我这周睡不着觉，我已经离开家了，我因此失去了工作。请帮助我。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <header>
            <H1>Give me miracle</H1>
        </header>
        <aside class="input">
            <form action="#" id="form">
                <label for="name">Input Your Name here</label>
                <input type="text" name="name" id="name">
                <input type="submit" name="submit" id="submit">
            </form>
        </aside>
        <aside class="output">
            <h1>this is the output</h1>
            <ul id="myUl">
                <li>balls</li>
                <li>dummy</li>
            </ul>
        </aside>    
        <script>
        function out(){
             const pliss = document.getElementById("name").value;
             const show = document.getElementById("myUl");
             const theOutput = document.createElement("li");
    }
        </script>
    </body>
    </html>

Answer 1

如果你没有从用户那里得到输入而不是让他处理通知他，这很简单：-

    <script>
         function out(){
              const pliss = document.getElementById("name").value;
              if(pliss == "" || pliss == null){
                  alert("Please enter your name")
              }
              else{
                  const show = document.getElementById("myUl");
                  const theOutput = document.createElement("li");
              }

         }
   </script>

Answer 2

Use decorations according to your preference

由于submit是向服务器提交表单，重新加载页面反馈，这里preventDefault();忽略这种方式，点击提交时执行该功能，而不执行[=85=的默认功能] 用户以服务器端语言指定的新选项卡。

使用特定的 id 从输入获取值并输入到 id :
这里第一个输入值被带到 const，然后使用 .innerHTML

输入 id

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <header>
    <H1>Give me miracle</H1>
  </header>
  <aside class="input">
    <form action="#" id="form">
      <label for="name">Input Your Name here</label>
      <input type="text" name="name" id="name">
      <input type="submit" name="submit" id="submit" value="Submit" onclick="out(event)">
    </form>
  </aside>
  <aside class="output">
    <h1>this is the output</h1>
    <ul id="myUl">
      <li id="myInput">Input will be here on click of submit</li>
      <li>dummy</li>
    </ul>
  </aside>
  <script>
    function out(event) {
      event.preventDefault();
      const pliss = document.getElementById("name").value;
      const show = document.getElementById("myUl");
      const theOutput = document.createElement("li");
      document.getElementById("myInput").innerHTML = pliss;
    }
  </script>
</body>

</html>

从多个输入获取值并分别使用特定的 id 进入 id :
如果输入多于一个参考下面的代码片段，方法几乎与第一个代码片段相同

<head>
  <title>Document</title>
</head>

<body>
  <header>
    <H1>Give me miracle</H1>
  </header>
  <aside class="input">
    <form action="#" id="form">
      <label for="firsName">Input Your First Name here</label>
      <input type="text" name="firsName" id="firsName">
      <br>
      <label for="lastName">Input Your Last Name here</label>
      <input type="text" name="lastName" id="lastName">
      <br>
      <input type="submit" name="submit" id="submit" value="Submit" onclick="out(event)">
    </form>
  </aside>
  <aside class="output">
    <h1>this is the output</h1>
    <ul id="myUl">
      <li id="myInput1">First Input will be here on click of submit</li>
      <li id="myInput2">Second Input will be here on click of submit</li>
    </ul>
  </aside>
  <script>
    function out(event) {
      event.preventDefault();
      const pliss1 = document.getElementById("firsName").value;
      const pliss2 = document.getElementById("lastName").value;
      document.getElementById("myInput1").innerHTML = pliss1;
      document.getElementById("myInput2").innerHTML = pliss2;
    }
  </script>
</body>

</html>

从多个输入中获取值并使用for循环输入到某个id：
评论在下面的片段中提供

<head>
  <title>Document</title>
</head>

<body>
  <header>
    <H1>Give me miracle</H1>
  </header>
  <aside class="input">
    <form action="#" id="form">
      <label for="firsName">Input Your First Name here</label>
      <input type="text" name="firsName" id="firsName">
      <br>
      <label for="lastName">Input Your Last Name here</label>
      <input type="text" name="lastName" id="lastName">
      <br>
      <input type="submit" name="submit" id="submit" value="Submit" onclick="out(event)">
    </form>
  </aside>
  <aside class="output">
    <h1>this is the output</h1>
    <ul id="myUl">
      <li id="myInput1">First Input will be here on click of submit</li>
      <li id="myInput2">Second Input will be here on click of submit</li>
    </ul>
  </aside>
  <script>
    function out(event) {
      event.preventDefault();
      var inputValue = document.getElementById("form").getElementsByTagName("INPUT")
      //Number of li tags should be equal to number of inputs whose values you want to take
      var inputValueToLi = document.getElementById("myUl").getElementsByTagName("LI")
      //Here length is used 1 less because there are 3 input tags(out of which one is submit)
      for (let i = 0; i < inputValue.length-1; i++) {
      //loop through every values and enter them 
       inputValueToLi[i].innerHTML = inputValue[i].value
       //Here how it is working
       //inputValueToLi[1].innerHTML = inputValue[1].value
       //inputValueToLi[2].innerHTML = inputValue[2].value
      }
    }
  </script>
</body>

</html>

使用.append方法从输入获取值并附加到li标签：
取自一个 @Sourav Das，但采用 JavaScript 方式。
在下面的代码片段中，首先使用 .createElement 创建一个 li 元素，并将 input 的值带到 var，然后将其值创建为 textNode，然后在 created li 标签使用 .appendChild 。然后再次使用 .appendChild 在 ul 标签中输入此标签。
Refer to this to know more about following method

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <header>
    <H1>Give me miracle</H1>
  </header>
  <aside class="input">
    <form action="#" id="form" onsubmit="addtoList(event);">
      <label for="name">Input Your Name here</label>
      <input type="text" id="marvel">
      <input type="submit" value="Add to List">
    </form>
  </aside>
  <aside class="output" id="container">
    <h1>this is the output</h1>
    <ul class="inputApendHere">
      <li>balls</li>
      <li>dummy</li>
    </ul>
  </aside>
  <script>
    function addtoList(event) {
      event.preventDefault();
      var li = document.createElement("li");
      var inputValue = document.getElementById("marvel").value;
      var t = document.createTextNode(inputValue);
      li.appendChild(t);
      document.querySelector(".inputApendHere").appendChild(li);
      document.querySelector("#marvel").value = "";
    }
  </script>
</body>

Answer 3

您没有在标签中使用任何 JQuery 库文件或 cdn。下面是工作代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <!-- jQuery CDN link -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <header>
        <H1>Give me miracle</H1>
    </header>
    <aside class="input">
        <form action="#" id="form" onsubmit="addtoList('marvel');">
            <label for="name">Input Your Name here</label>
            <input type="text" id="marvel">
            <input type="submit" value="Add to List">
        </form>
    </aside>
    <aside class="output" id="container">
        <h1>this is the output</h1>
        <ul>
            <li>balls</li>
            <li>dummy</li>
        </ul>
    </aside>    
    <script>
    function addtoList(id) {

        var temp = $("#"+id).val();
        var newli = '<li>'+temp+'</li>';
        $("#container ul").append(newli);
    }
    </script>
 </body>

`

我怎样才能在显示器上得到结果

how i can get the result on a display

html

javascript

input

output