gpt4 book ai didi

javascript - 如何选择具有 id 的特定按钮?

转载 作者:行者123 更新时间:2023-11-28 17:28:12 25 4
gpt4 key购买 nike

我是 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)

最佳答案

您的代码相对正确,您需要将所有 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)

}

关于javascript - 如何选择具有 id 的特定按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51059192/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com