I'm studying javascript and I did an exercise where I have an image of a deleted lamp where when I click it it changes the lamp by placing a light, as if it were lighting a lamp, however I'm in doubt I do not know how to do the same change the image to make the delete effect again. Here is the code below how I implemented it.
<script>
function ligar(){
document.getElementById('lamp').src = "images/lampada-on.jpg";
}
</script>
You can do it this way
function ligarDesliga(){
var imagem = document.getElementById('lamp').src;
var imagem_ligado = 'https://www.w3schools.com/js/pic_bulbon.gif';
var imagem_desligado = 'https://www.w3schools.com/js/pic_bulboff.gif';
if(imagem == imagem_ligado){
document.getElementById('lamp').src = imagem_desligado;
}else{
document.getElementById('lamp').src = imagem_ligado;
}
}
document.getElementById("lamp").addEventListener("click", ligarDesliga);#lamp{
cursor: pointer;
cursor: hand;
}<img id="lamp" src="https://www.w3schools.com/js/pic_bulboff.gif">HTML
<imgid="lamp" src="images/lampada-off.jpg">
JavaScript
This is just to leave the cursor in the same way as a "little" link, so the user understands that it is possible to click on that image.
#lamp{
cursor: pointer;
cursor: hand;
}
JavaScript
function ligarDesliga(){
var imagem = document.getElementById('lamp').src;
var imagem_ligado = 'images/lampada-on.jpg';
var imagem_desligado = 'images/lampada-off.jpg';
if(imagem == imagem_ligado){
document.getElementById('lamp').src = imagem_desligado;
}else{
document.getElementById('lamp').src = imagem_ligado;
}
}
document.getElementById("lamp").addEventListener("click", ligarDesliga);
I created a click event for the "lamp" id and the "turn off" function verifies which image is present in the tag and changes it, making the effect on and off.
Update
Another example of w3 Tryjs Intro Lightbuld
Let's Go!
$('.cube-switch .switch').click(function() {
if ($('.cube-switch').hasClass('active')) {
$('.cube-switch').removeClass('active');
$('#light-bulb2').css({'opacity': '0'});
} else {
$('.cube-switch').addClass('active');
$('#light-bulb2').css({'opacity': '1'});
}
});body {
background: rgb(70, 72, 75);
}
/* SWITCH */
.cube-switch {
border-radius:10px;
border:1px solid rgba(0,0,0,0.4);
box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 100px 50px rgba(255,255,255,0.1);
/* Prevents clics on the back */
cursor:default;
display: block;
height: 100px;
position: relative;
margin: 5% 0px 0px 10%;
overflow:hidden;
/* Prevents clics on the back */
pointer-events:none;
width: 100px;
white-space: nowrap;
background:#333;
}
/* The switch */
.cube-switch .switch {
border:1px solid rgba(0,0,0,0.6);
border-radius:0.7em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -7px 0 rgba(0,0,0,0.2),
inset 0 50px 10px rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.2);
display:block;
width: 60px;
height: 60px;
margin-left:-30px;
margin-top:-30px;
position:absolute;
top: 50%;
left: 50%;
width: 60px;
background:#666;
transition: all 0.2s ease-out;
/* Allows click */
cursor:pointer;
pointer-events:auto;
}
/* SWITCH Active State */
.cube-switch.active {
/*background:#222;
box-shadow:
0 0 5px rgba(0,0,0,0.5),
inset 0 50px 50px rgba(55,55,55,0.1);*/
}
.cube-switch.active .switch {
background:#333;
box-shadow:
inset 0 6px 0 rgba(255,255,255,0.1),
inset 0 7px 0 rgba(0,0,0,0.2),
inset 0 -50px 10px rgba(0,0,0,0.1),
0 1px 0 rgba(205,205,205,0.1);
}
.cube-switch.active:after,
.cube-switch.active:before {
background:#333;
box-shadow:
0 1px 0 rgba(255,255,255,0.1),
inset 1px 2px 1px rgba(0,0,0,0.5),
inset 3px 6px 2px rgba(200,200,200,0.1),
inset -1px -2px 1px rgba(0,0,0,0.3);
}
.cube-switch.active .switch:after,
.cube-switch.active .switch:before {
background:#222;
border:none;
margin-top:0;
height:1px;
}
.cube-switch .switch-state {
display: block;
position: absolute;
left: 40%;
color: #FFF;
font-size: .5em;
text-align: center;
}
/* SWITCH On State */
.cube-switch .switch-state.on {
bottom: 15%;
}
/* SWITCH Off State */
.cube-switch .switch-state.off {
top: 15%;
}
#light-bulb2 {
width: 150px;
height: 150px;
background: url(https://lh4.googleusercontent.com/-katLGTSCm2Q/UJC0_N7XCrI/AAAAAAAABq0/6GxNfNW-Ra4/s300/lightbulb.png) no-repeat 0 0;
}
#light-bulb {
position: absolute;
width: 150px;
height: 150px;
top: 5%;
left: 40%;
background: url(https://lh4.googleusercontent.com/-katLGTSCm2Q/UJC0_N7XCrI/AAAAAAAABq0/6GxNfNW-Ra4/s300/lightbulb.png) no-repeat -150px 0;
cursor: move;
z-index: 800;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divhref="" class="cube-switch">
<span class="switch">
<span class="switch-state off">Off</span>
<span class="switch-state on">On</span>
</span>
</div>
<div id="light-bulb" class="off ui-draggable" ><div id="light-bulb2" style="opacity: 0; "></div></div>I believe this does what you need:
function liga_desliga(){
const lamp = document.querySelector('#lamp');
var src = ['lampada-on.jpg','lampada-off.jpg']
.filter((value) => {
var a = lamp.src.match(/\/(lampada-.+)/i)[1];
return value != a;
})[0];
lamp.src = 'images/${src}';
}
You can make a code similar to mine to change the lamp image.
<script>
var atual_state = 'DESLIGADA';
function mudaEstado() {
atual_state === 'DESLIGADA' ? atual_state = 'LIGADA' : atual_state = 'DESLIGADA';
return atual_state;
}
function ligaDesliga() {
if (atual_state === 'DESLIGADA')
document.getElementById('lampada').src = 'ligada.jpg';
else
document.getElementById('lampada').src = 'desligada.jpg';
mudaEstado();
}
</script>
<button onclick="ligaDesliga()"></button>
<img id="lampada" src="desligada.jpg">
A very simple and lean way to do this:
function ligarApagar(e){
e.src = "images/lampada-"+( ~e.src.indexOf("-on") ? "off" : "on" )+".jpg";
// daqui pra baixo é apenas exemplo para mostrar o texto
// pode apagar
document.querySelector("b").textContent = e.src;
}<img height="100" id="lamp" src="images/lampada-on.jpg">
<b> https://stacksnippets.net/images/lampada-on.jpg </b>
<br>
<button type="button" id="controle" onclick="ligarApagar(document.getElementById('lamp'))">Ligar/Apagar</button>