当我添加" "时，我尝试与我的 JavaScript 链接的按钮 Onlick 似乎不起作用或在我的 VS 代码上突出显示橙色

为了解决这个问题，我已经尝试了一切，甚至看了我学习的教程的视频，但似乎无法正常工作。甚至在网上查了一下。我添加了javascript代码，所以你们可以看到我确实定义了它。我对这一切都很陌生，所以最好解释一下，会非常感谢

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">


<div>
<button class="btn btn-primary" onclick='ageInDays()'>Click Here</button>
</div>

<div>
<button class="btn btn-danger">Reset</button>
</div>

<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>

</div>

</div>



<script src="script.js"></script>

</body>
</html>



function ageInDays() {
let birthYear = prompt("what year were you born...Good friend?");
}

它不起作用，因为您正在使用内联脚本来调用ageInDays函数，但定义在另一个文件中，当浏览器读取内联JS时，该文件尚未加载，因此有两种方法可以解决此问题。

使用内联脚本，使JS与HTML一样在浏览器上

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick="ageInDays()">Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script>
function ageInDays() { let birthYear = prompt("what year were you born...Good friend?"); } 
</script>
</body>
</html>

处理脚本文件中的所有内容

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" id="action">Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

以及在main.js 中

const button = document.getElementById('action');
button.addEventListener('click', function(){
let birthYear = prompt("what year were you born...Good friend?"); 
});

将其添加到script.js文件中，并从按钮中删除onclick='ageInDays()'。

let btn = document.querySelector(".btn-primary");
btn.addEventListener("click", ageInDays);
function ageInDays(){
//code to be executed when you clicked the button
}

相关内容

最新更新

热门标签：