当我添加“”时，我尝试与我的 javascript 链接的按钮 onlick 似乎不起作用或在我的 vs 代码上突出显示橙色
[英]button onlick that i tried linking with my javascript doesn't seem to be working or highlighting orange on my vs code when i add the “”
问题描述
i have tried everything in order to fix the issue and even looked at the video of the tutorial im learning from but can't seem to get it working crrectly.
我已经尝试了一切以解决问题，甚至查看了我正在学习的教程视频，但似乎无法正常工作。 Even checked around the internet.甚至在互联网上进行了检查。 i added the javascript code so you guys can see that i did define it.我添加了 javascript 代码，所以你们可以看到我确实定义了它。 im new to all this so explaining it best you can would be greatly appreciated我对这一切都是新手，所以最好地解释一下，您将不胜感激
<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?");
}
2 个解决方案
解决方案1
0 2020-09-08 03:10:10
It not working because you are using in line script for the invocation of the ageInDays function, but the definition is in another file that has not loaded when the browser read the inline JS so there are two ways of fixing this.它不起作用，因为您正在使用内联脚本来调用ageInDays函数，但定义位于另一个文件中，当浏览器读取内联 JS 时，该文件尚未加载，因此有两种方法可以解决此问题。
- Use an inline script so the JS is already on the browser same time as HTML like使用内联脚本，这样 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>
- handle everything in the script file处理脚本文件中的所有内容
<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>
and in the main.js并在 main.js
const button = document.getElementById('action');
button.addEventListener('click', function(){
let birthYear = prompt("what year were you born...Good friend?");
});
解决方案2
0 2020-09-08 03:14:48
Add this to your script.js file, and remove onclick='ageInDays()' from your button.将此添加到您的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
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.