1

estou tendo um problema em um trabalho de programação para web onde já esta quase tudo pronto porem no enunciado ele pede para fazer um botão que ligue e desligue a lampada ... consegui! porem se clicar diversas vezes no deligar e no interruptor a imagem some. nao estou conseguindo resolver.

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>

1 Resposta 1

1

Altere o seu currentImgIndex para um boolean. Ao acender a imagem, o currentImgIndex altera o valor pra true, ao apagar altera o valor para false.

Na função trocar3() é só invertar o valor fazendo currentImgIndex = !currentImgIndex, caso a variável seja true(acesa) ela passará para false(apagada) e vice versa.

Utiizei o operador ternário para pegar o valor a ser colocado no índice da imagem

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>

Ainda da pra simplificar seu código resumindo em apenas um método pra trocar, enviando true or false para a função (acender ou apagar), caso seja o interruptor é só não enviar nada para que possamos pegar o valor atual do currentImgIndex e inverter

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .