Question

我正在尝试使用JavaScript提醒HTML表单中的元素。我已经按照大部分问题尝试使用相同的代码，但我无法提醒它。请帮我。谢谢。这是我的代码：

<!DOCTYPE.html>
<html>
<head>
<title> Registration </title>
</head>
<body>
    <form id="registration">
        <fieldset>
            <legend>Your details</legend>
            <ol>
                <li>
                    <label for="namefirst">First Name</label>
                    <input id="namefirst" class="details" name="nameFirst" placeholder="John" required="" autofocus="" type="text" value=""/>
                </li>
                <li> 
                    <label for="namelast">Last Name</label>
                    <input id="namelast" class="details" name="namelast" placeholder ="Dickens" required="" autofocus="" type="text" value=""/>
                </li>
                <li>
                    <label for="username">Username</label>
                    <input id="username" class="details" name="username" required="" autofocus="" type="text" value=""/>
                </li>
                <li>
                    <label for="email">e-mail</label>
                    <input id="email" class="details" name="email" placeholder="xxxx@xmail.com" required="" autofocus="" type="text" value=""/>
                </li>
            </ol>
        </fieldset>
        <fieldset>
                <p>Click "Try it" to display the value of each element in the form.</p>

                <button onclick="myFunction()">Try it</button>

                <p id="demo"></p>
        </fieldset>
    </form>
    <script>
    myfunction() {
    var x = document.getElementsByClassName("details");
    var text = "";
    for(var i = 0; i < x.length; i++) {
            text += x[i].value + " ";
    }
    alert(text);
    }
     </script>
</body>
</html>

Answer 1

function myFunction() {
var x = document.getElementsByClassName("details");
var text = "";
for(var i = 0; i < x.length; i++) {
        text += x[i].value + " ";
}
alert(text);
}

您没有宣布您的功能正常。 myfunction不是myFunction

Answer 2

问题

定义的函数为myfunction，但使用myFunction
button元素的默认行为是提交表单，您需要将type属性设置为button。

代码，将HTML更改为

<button type="button" onclick="myfunction()">Try it</button>

  function myfunction() {
    var x = document.getElementsByClassName("details");
    var text = "";
    for (var i = 0; i < x.length; i++) {
      text += x[i].value + " ";
    }
    alert(text);
  }

<form id="registration">
  <fieldset>
    <legend>Your details</legend>
    <ol>
      <li>
        <label for="namefirst">First Name</label>
        <input id="namefirst" class="details" name="nameFirst" placeholder="John" required="" autofocus="" type="text" value="" />
      </li>
      <li>
        <label for="namelast">Last Name</label>
        <input id="namelast" class="details" name="namelast" placeholder="Dickens" required="" autofocus="" type="text" value="" />
      </li>
      <li>
        <label for="username">Username</label>
        <input id="username" class="details" name="username" required="" autofocus="" type="text" value="" />
      </li>
      <li>
        <label for="email">e-mail</label>
        <input id="email" class="details" name="email" placeholder="xxxx@xmail.com" required="" autofocus="" type="text" value="" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <p>Click "Try it" to display the value of each element in the form.</p>

    <button type="button" onclick="myfunction()">Try it</button>

    <p id="demo"></p>
  </fieldset>
</form>

Answer 3

<!DOCTYPE.html>
<html>
<head>
<title> Registration </title>
</head>
<body>
    <form id="registration">
        <fieldset>
            <legend>Your details</legend>
            <ol>
                <li>
                    <label for="namefirst">First Name</label>
                    <input id="namefirst" class="details" name="nameFirst" placeholder="John" required="" autofocus="" type="text" value=""/>
                </li>
                <li> 
                    <label for="namelast">Last Name</label>
                    <input id="namelast" class="details" name="namelast" placeholder ="Dickens" required="" autofocus="" type="text" value=""/>
                </li>
                <li>
                    <label for="username">Username</label>
                    <input id="username" class="details" name="username" required="" autofocus="" type="text" value=""/>
                </li>
                <li>
                    <label for="email">e-mail</label>
                    <input id="email" class="details" name="email" placeholder="xxxx@xmail.com" required="" autofocus="" type="text" value=""/>
                </li>
            </ol>
        </fieldset>
        <fieldset>
                <p>Click "Try it" to display the value of each element in the form.</p>

                <button onclick="myFunction()" type="button">Try it</button>

                <p id="demo"></p>
        </fieldset>
    </form>
    <script>
    function myFunction() {
        
    var x = document.getElementsByClassName("details");
    var text = "";
    for(var i = 0; i < x.length; i++) {
            text += x[i].value + " ";
            
    }
    alert(text);
    }
     </script>
</body>
</html>

我正在尝试使用JavaScript警告HTML表单中的元素，但没有得到任何东西

3 个答案: