Question

我是JavaScrip的新手，我想知道如何选择具有特定ID的提交按钮。我尝试使用“ getElementById”，但控制台显示“ null”。

HTML代码

<html>

<head>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <h1> Welcone to the booking site </h1>
  <h4> Please, choose a destination </h4>
</body>
<form name="myTravelForm">
  <select name="destination">
    <option value="Antarctica" selected>Antarctica</option>
    <option value="Costa Rica">Costa Rica</option>
  </select>
  <input type="button" value="Add this destination" id="banana" />
</form>

<div id="travelerInfo"></div>

</html>

JavaScript代码

var x;
x = document.getElementById("banana")
console.log(x)

Answer 1

您的代码相对正确，您需要将所有html放在body标签内。同样，在文档完全加载完成之前，脚本也会被触发。您应该在关闭body之前放置脚本，以便在加载所有DOM元素后触发脚本。

<html>
    <head>

    </head>

    <body>
        <h1> Welcone to the booking site </h1>
        <h4> Please, choose a destination </h4>

        <form name="myTravelForm">
            <select name="destination">
                <option value="Antarctica" selected>Antarctica</option>
                <option value="Costa Rica">Costa Rica</option>
            </select>
            <input type="button" value="Add this destination" id="banana"/>
        </form>

        <div id="travelerInfo"></div>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

还有一种解决方案，可以将script.js保留在head标签中，但将代码包装在一个函数中，然后在body标签内的onload中将其作为属性调用。

在script.js中：

function findID(){
  var x;

  x = document.getElementById("banana")
   console.log(x)

 }

体内标签：

<body onload="findID();">

或者您可以将script.js留在<head>标记内，但用window.onload或document.onload包装代码。这可能是最优雅的解决方案。

window.onload = function(e){
  var x;

  x = document.getElementById("banana")
   console.log(x)

 }

Answer 2

它工作正常，在html内编写body代码

请参见下面的代码：

var x;
x = document.getElementById("banana")
console.log(x)
console.log(x.value)

<html>

<head>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <h1> Welcone to the booking site </h1>
  <h4> Please, choose a destination </h4>

  <form name="myTravelForm">
    <select name="destination">
      <option value="Antarctica" selected>Antarctica</option>
      <option value="Costa Rica">Costa Rica</option>
    </select>
    <input type="button" value="Add this destination" id="banana" />
  </form>

  <div id="travelerInfo"></div>
</body>

</html>

Answer 3

这可能是因为您的js在加载元素之前就已执行。尝试使用这样的HTML：

<html>

    <head>
    </head>

    <body>
        <h1> Welcone to the  booking site </h1>
        <h4> Please, choose a destination </h4>
    </body>
        <form name="myTravelForm">
    <select name="destination">
        <option value="Antarctica" selected>Antarctica</option>
        <option value="Costa Rica">Costa Rica</option>
    </select>
        <input type="button" value="Add this destination" id="banana"/>
        </form>

        <div id="travelerInfo"></div>
        <script type="text/javascript" src="script.js"></script>
</html>

Answer 4

您似乎在正确的轨道上。您应该等待所有元素加载完毕。只需添加

document.addEventListener("DOMContentLoaded", function(event) { 
   var x;
   x = document.getElementById("banana")
   console.log(x)
   console.log(x.value)
});

或者如果您使用的是JQuery

$( document ).ready(function() {
    console.log( "ready!" );
});

如何选择带有ID的特定按钮？

4 个答案: