change image with a BUG button

Asked

Viewed 16 times

1

I’m having a problem in a web programming job where already this almost everything ready put in the statement he asks to make a button to turn the bulb on and off ... I got! however if you click several times on the deligar and the switch the image disappears. I can’t seem to solve.

function mudarcor() {
  var x = document.getElementsByTagName("p");
  var z = 7
  for (var i = 0; i < z; i++) {
    x[i].style.backgroundColor = "yellow";
  }
}

var currentImgIndex = 1;
var ImgSrcArray = [
  'lamp_off.gif',
  'lamp_on.gif',
];

function trocar() {


  document.getElementById("lamp").src = ImgSrcArray[1];
}

function trocar1() {


  document.getElementById("lamp").src = ImgSrcArray[0];
  currentImgIndex++;
}
var currentImgIndex = 1;
var ImgSrcArray = [
  'https://www.tutch.co.uk/assets/images/bulboff.gif',
  'https://www.tutch.co.uk/assets/images/bulbon.gif',
];

function trocar3() {

  if (currentImgIndex == ImgSrcArray.length) {
    currentImgIndex = 0;
  }
  document.getElementById("lamp").src = ImgSrcArray[currentImgIndex];
  currentImgIndex++;

}
#p2 {
  font-size: 40px
}

#p3 {
  color: blue
}

#p4 {
  text-align: center
}

#p5 {
  color: green;
  font-size: 10px;
}

#p6 {
  color: red;
  font-weight: bold
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#botao2 {
  width: 100%;
  height: 100%;
}

#botao3 {
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
  <script src="Myscript.js"></script>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <h1>Esta é uma página HTML com 6 parágrafos e um botão.</h1>
  <p id="p1">Aula 8 de Programação para Web 2.</p>
  <p id="p2">este é o exemplo 2 e ele tem o tamanho de 40 px </p>
  <p id="p3">este é o exemplo 3 e ele é <b>azul</b></p>
  <p id="p4">este é o exemplo 4 e ele esta alinhado ao centro</p>
  <p id="p5">este é o exemplo 5 e ele é palmeirense</p>
  <p id="p6">“JavaScript não é Java”</p>
  <input id='botao1' type='button' value='Não Clique!' onclick="mudarcor(); ">
  <br>
  <br>


  <img id="lamp" alt="lamp" class="center" src="https://www.tutch.co.uk/assets/images/bulboff.gif" width=100 height=180>
  <input id='botao2' type='button' value='acende!' onclick="trocar(); ">
  <input id='botao3' type='button' value='apaga!' onclick="trocar1(); ">
  <input id='botao3' type='button' value='Interruptor' onclick="trocar3(); ">

  </div>
</body>

</html>

javascript

1 answer

1

Change your currentImgIndex for a boolean. When lighting the image, currentImgIndex changes the value to true, Deleting changes the value to false.

In function trocar3() just reverse the value by doing currentImgIndex = !currentImgIndex, if the variable is true(lit) it will pass to false(deleted) and vice versa.

I used the ternary operator to take the value to be placed in the image index

function mudarcor() {
    var x = document.getElementsByTagName("p");
    var z = 7
    for (var i = 0; i < z; i++) {
        x[i].style.backgroundColor = "yellow";
    }
}

var currentImgIndex = false;

function trocar() {
    document.getElementById("lamp").src = ImgSrcArray[1];
    currentImgIndex = true;
}

function trocar1() {
    document.getElementById("lamp").src = ImgSrcArray[0];
    currentImgIndex = false;
}
var ImgSrcArray = [
    'https://www.tutch.co.uk/assets/images/bulboff.gif',
    'https://www.tutch.co.uk/assets/images/bulbon.gif',
];

function trocar3() {
    currentImgIndex = !currentImgIndex;
    var index = currentImgIndex ? 1 : 0;
    document.getElementById("lamp").src = ImgSrcArray[index];
}
#p2 {
    font-size: 40px
}

#p3 {
    color: blue
}

#p4 {
    text-align: center
}

#p5 {
    color: green;
    font-size: 10px;
}

#p6 {
    color: red;
    font-weight: bold
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#botao2 {
    width: 100%;
    height: 100%;
}

#botao3 {
    width: 100%;
    height: 100%;
}
<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
        <script src="Myscript.js"></script>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>

    <body>
        <h1>Esta é uma página HTML com 6 parágrafos e um botão.</h1>
        <p id="p1">Aula 8 de Programação para Web 2.</p>
        <p id="p2">este é o exemplo 2 e ele tem o tamanho de 40 px </p>
        <p id="p3">este é o exemplo 3 e ele é <b>azul</b></p>
        <p id="p4">este é o exemplo 4 e ele esta alinhado ao centro</p>
        <p id="p5">este é o exemplo 5 e ele é palmeirense</p>
        <p id="p6">“JavaScript não é Java”</p>
        <input id='botao1' type='button' value='Não Clique!' onclick="mudarcor(); ">
        <br>
        <br>

        <img id="lamp" alt="lamp" class="center" src="https://www.tutch.co.uk/assets/images/bulboff.gif" width=100 height=180>
        <input id='botao2' type='button' value='acende!' onclick="trocar(); ">
        <input id='botao3' type='button' value='apaga!' onclick="trocar1(); ">
        <input id='botao3' type='button' value='Interruptor' onclick="trocar3(); ">

    </body>
</html>

Still to simplify your code summarizing in only one method to exchange, sending true or false for the function (on or off), if the switch is just do not send anything so that we can pick up the current value of the currentImgIndex and reverse

function mudarcor() {
    var x = document.getElementsByTagName("p");
    var z = 7
    for (var i = 0; i < z; i++) {
        x[i].style.backgroundColor = "yellow";
    }
}

var currentImgIndex = false;

var ImgSrcArray = [
    'https://www.tutch.co.uk/assets/images/bulboff.gif',
    'https://www.tutch.co.uk/assets/images/bulbon.gif',
];

function trocar(acao = null) {
    currentImgIndex = acao != null ? acao : !currentImgIndex;
    var index = currentImgIndex ? 1 : 0;
    document.getElementById("lamp").src = ImgSrcArray[index];
}
#p2 {
    font-size: 40px
}

#p3 {
    color: blue
}

#p4 {
    text-align: center
}

#p5 {
    color: green;
    font-size: 10px;
}

#p6 {
    color: red;
    font-weight: bold
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#botao2 {
    width: 100%;
    height: 100%;
}

#botao3 {
    width: 100%;
    height: 100%;
}
<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
        <script src="Myscript.js"></script>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>

    <body>
        <h1>Esta é uma página HTML com 6 parágrafos e um botão.</h1>
        <p id="p1">Aula 8 de Programação para Web 2.</p>
        <p id="p2">este é o exemplo 2 e ele tem o tamanho de 40 px </p>
        <p id="p3">este é o exemplo 3 e ele é <b>azul</b></p>
        <p id="p4">este é o exemplo 4 e ele esta alinhado ao centro</p>
        <p id="p5">este é o exemplo 5 e ele é palmeirense</p>
        <p id="p6">“JavaScript não é Java”</p>
        <input id='botao1' type='button' value='Não Clique!' onclick="mudarcor(); ">
        <br>
        <br>

        <img id="lamp" alt="lamp" class="center" src="https://www.tutch.co.uk/assets/images/bulboff.gif" width=100 height=180>
        <input id='botao2' type='button' value='acende!' onclick="trocar(true); ">
        <input id='botao3' type='button' value='apaga!' onclick="trocar(false); ">
        <input id='botao3' type='button' value='Interruptor' onclick="trocar(); ">

    </body>
</html>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.