Question 44559 in Html Question posted in
Some basic documentation can be found here.

Image doesn't appears in the browser javascript – Html

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    InSync is correct

    1. 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)
    2. Naming conventions and modern practices, eg: camelCase, use let and const.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search