英文:
Image doesn't appears in the browser javascript
问题
我正在使用HTML、CSS和JavaScript进行一个项目，我希望在单击"Yes"按钮后出现图像"noite.png"，并且之后计数器必须等于0（我需要这个计数器来知道答对问题的次数）。
以下是你提供的HTML代码（我将保持原文）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frango - O Jogo</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Title</h1>
<input id='btn_No' type="button" value="No" onclick="click_No()">
<input id='btn_Yes' type="button" value="Yes" onclick="click_Yes()">
<div id="res"></div>
<img id="img" src="" alt="">
<script src="script.js"></script>
</body>
</html>
以及以下的CSS代码：
body{
background-color: black;
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
input{
margin: 10px 10px;
font-size: larger;
padding: 8px 20px;
border-radius: 10px 10px;
}
#btn_No{
background-color: rgb(255, 0, 0);
border-color: rgb(253, 10, 10);
}
#btn_Yes{
background-color: rgb(42, 226, 5);
border-color: rgb(42, 226, 5);
}
在你提供的JavaScript中，你有一个错误，你应该将JavaScript代码放在<script>标签中，而不是将其放在<script src="script.js"></script>标签中。请修改如下：
var res = document.getElementById('res');
var contador = 0;
var img = document.getElementById('img');
function click_No() {
res.innerHTML = `Que pena, tente de novo!`;
contador++;
}
function click_Yes() {
res.innerHTML = `Acertou! Levaste ${contador} vezes para acertar!`;
img.src = 'noite.png'; // 去掉括号
contador = 0;
}
然后，确保你的noite.png文件位于与HTML文件相同的目录中。这样，当你点击"Yes"按钮时，图像应该会在浏览器中显示，并且计数器将重置为0。
英文:
I'm doing a project with HTML, CSS and `` and I pretend after the Yes button is clicked, should appear the image noite.png and after that the counter must be equal to 0 (I need this counter to know how many times the person needed to answer correctly the question).
The following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frango - O Jogo</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Title</h1>
<input id='btn_No' type="button" value="No" onclick="click_No()">
<input id='btn_Yes' type="button" value="Yes" onclick="click_Yes()">
<div id="res"></div>
<img id="img" src="" alt="">
<script src="script.js">
var res = document.getElementById('res')
var contador = 0
var img = document.getElementById('img')
function click_No(){
res.innerHTML = `Que pena, tente de novo!`
contador++
}
function click_Yes(){
res.innerHTML = `Acertou! Levaste ${contador}vezes para acertar!`
img.src = ('noite.png')
contador = 0
}
</script>
</body>
</html>
And the following CSS:
body{
background-color: black;
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
input{
margin: 10px 10px;
font-size: larger;
padding: 8px 20px;
border-radius: 10px 10px;
}
#btn_No{
background-color: rgb(255, 0, 0);
border-color: rgb(253, 10, 10);
}
#btn_Yes{
background-color: rgb(42, 226, 5);
border-color: rgb(42, 226, 5);
}
Here's the output: Output
But the image doesn't appear in the browser and the counter and the counter isn't equal to 0. I think the js isn't running the lines 12 and 13 of the script. Could someone help me?
答案1
得分: 1
只需更改其中一个为 click_No。
英文:
It appears that you have two click_Yes functions, of which the former is overridden by the latter. Simply change one of them to click_No.
答案2
得分: 0
- JavaScript 应该在
<head>中使用defer属性或放在<body>的最后，否则它将无法选择<script>标签后的元素！尝试使用console.log(img)。 - 命名约定和现代做法，例如：驼峰命名法，使用
let和const。
英文:
InSync is correct
- JavaScript should be in head with defer or last thing in body, other ways it will not select elements after script tag ! try console.log(img)
- Naming conventions and modern practices, eg: camelCase, use let and const.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论