javascript - 在 外部显示数据

Question

首先，我说我是初学者。我有个问题。我想显示输入的信息，但它们只显示一秒钟然后消失。

我知道为什么:因为我使用<form> 。

我使用<form>因为我需要一个按钮来重置表单。因此，目前，使用 时，重置按钮可以工作，但显示信息则不起作用。例如，我尝试使用另一个 block “部分”，在这里，显示按钮有效，但重置不起作用 -> 因为它仅适用于 <form> 。

我尝试创建一个重置输入的函数，我使用 reset()但它也仅适用于 <form> 。我发现我可以使用 preventDefault();但我对此不太了解，也不知道它到底是如何工作的。有人可以帮助我吗？

<script type="text/javascript">
    function show()
    {
        var button = document.getElementById("press"); 
        var name = document.getElementById("name").value;
        var surname = document.getElementById("surname").value;
        var mail = document.getElementById("mail").value;
        var service = document.getElementById("service").value;
        var mail_low = mail.toLowerCase(); 

        button.addEventListener("submit", function(e)
        {
            document.getElementById("info").innerHTML = name+" "+surname+"<br/>"+mail_low+"<br/>"+"Service: "+usluga;
            e.preventDefault();
        }, false);
    }

<form>
    Name: <input type="text" id="name"/><br/>
    Surname: <input type="text" id="surname"/><br/>
    E-mail: <input type="text" id="mail"/><br/>
    Serivce: 
    <select id="service">
        <option>naprawa komputera</option>
        <option>odzyskiwanie danych</option>
        <option>problemy z oprogramowaniem</option>
        <option>konfiguracja sieci LAN</option>
        <option>inne</option>
    </select><br/>
    <input type="checkbox" checked="checked"/>Send copy information<br/>
    <button type="reset" value="Reset">Reset</button>
    <button type="submit" value="Send" onclick="show()" id="press">Send</button>
</form>

<p id="info"></p>

Answer 1

这不是 click事件button你应该进行设置，它是 submit事件form 。现在您正在尝试设置 submit事件button了，但是一个button没有submit事件，一个form确实如此。

然后，只需取消该事件( form.submit )即可。

此外，don't set up your events with inline HTML event handlers (即 onclick )。使用 .addEventListener() 如下所示(并在我共享的链接中进行了讨论)。

document.querySelector("form").addEventListener("submit", function (event) {
  event.preventDefault(); // <-- Prevents the native behavior of the event
  
  var button = document.getElementById("press"); 
  var name = document.getElementById("name").value;
  var surname = document.getElementById("surname").value;
  var mail = document.getElementById("mail").value;
  var service = document.getElementById("service").value;
  var mail_low = mail.toLowerCase(); 

  document.getElementById("info").innerHTML = name+" "+surname+"<br/>"+mail_low+"<br/>"+"Service: "+service;  

});

<form action="#">
    Name: <input type="text" id="name"><br/>
    Surname: <input type="text" id="surname"><br/>
    E-mail: <input type="text" id="mail"><br/>
    Serivce: 
    <select id="service">
        <option>naprawa komputera</option>
        <option>odzyskiwanie danych</option>
        <option>problemy z oprogramowaniem</option>
        <option>konfiguracja sieci LAN</option>
        <option>inne</option>
    </select><br/>
    <input type="checkbox" checked="checked">Send copy information<br>
    <button type="reset" value="Reset">Reset</button>
    <button type="submit" value="Send" id="press">Send</button>
</form>

<p id="info"></p>

但是，更好的是，由于您没有在任何地方提交数据，因此不需要 form元素放在首位。只需手动进行重置，然后您就不必担心提交和取消。

此外，don't use self-terminating tags (即 <br/> )。

为了提高效率，我还在下面重新组织了您的代码。

// Get your DOM references just once, not every time the event happens.
// Also, make your variables reference the elements directly, not a property
// of the element, like .value. That way, if you ever need to access the
// element for a different reason, you don't have to scan the DOM for it again.
var name = document.getElementById("userName");
var surname = document.getElementById("surname");
var mail = document.getElementById("mail");
var service = document.getElementById("service");
var output = document.getElementById("info");
var reset = document.getElementById("reset");

document.getElementById("press").addEventListener("click", function (event) { 

  var mail_low = mail.value.toLowerCase(); 
  
  output.innerHTML = userName.value + " " + surname.value + "<br>" + 
                       mail_low + "<br>Service: " + service.value;  

});

reset.addEventListener("click", function(){
  name.value = "";
  surname.value = "";
  mail.value = "";
  service.value = "";
  output.innerHTML = "";
});

<div>
    <!-- 
       The default type for an input is text, so: type="text" is not needed. 
       Also, since you won't be submitting data anywhere, the name attribute isn't needed either.
    -->
    Name: <input id="userName"><br>
    Surname: <input id="surname"><br>
    E-mail: <input id="mail"><br>
    Serivce: 
    <select id="service">
        <option>naprawa komputera</option>
        <option>odzyskiwanie danych</option>
        <option>problemy z oprogramowaniem</option>
        <option>konfiguracja sieci LAN</option>
        <option>inne</option>
    </select><br/>
    <input type="checkbox" checked="checked">Send copy information<br>
    <button id="reset" value="Reset">Reset</button>
    <button type="button" value="Send" id="press">Send</button>
</div>

<p id="info"></p>