Decrease and improve code

Asked

Viewed 55 times

-1

I need to create 5 waves with text inside and the waves have to have a move to extend/contract when clicking, the code I made the only way it works is if I click in order, otherwise it gets messy. I will add this code in a Wordpress HTML widget (Elementor Pro).

function movimento1() {
  let img1 = document.getElementById("imagem1")
  img1.style.marginBottom = 120 + "px";
  img1.style.transition = 2 + "s"
}

function movimento2() {
  let img2 = document.getElementById("imagem2")
  img2.style.marginBottom = 120 + "px";
  img2.style.marginTop = -160 + "px"
  img2.style.transition = 2 + "s"
}

function movimento3() {
  let img3 = document.getElementById("imagem3")
  img3.style.marginBottom = 120 + "px";
  img3.style.marginTop = -160 + "px"
  img3.style.transition = 2 + "s"
}

function movimento4() {
  let img4 = document.getElementById("imagem4")
  img4.style.marginBottom = 120 + "px";
  img4.style.marginTop = -160 + "px"
  img4.style.transition = 2 + "s"
}

function movimento5() {
  let img5 = document.getElementById("imagem5")
  img5.style.marginBottom = 120 + "px";
  img5.style.marginTop = -160 + "px"
  img5.style.transition = 2 + "s"
}
#imagem1 {
  width: 100%;
  height: 320px;
  position: relative;
}

#imagem2 {
  width: 100%;
  height: 320px;
  position: relative;
  top: -180px;
}

#imagem3 {
  width: 100%;
  height: 320px;
  position: relative;
  top: -360px;
}

#imagem4 {
  width: 100%;
  height: 320px;
  position: relative;
  top: -540px;
}

#imagem5 {
  width: 100%;
  height: 320px;
  position: relative;
  top: -720px;
}
<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>Document</title>
  <link rel="stylesheet" href="estilo.css">
</head>

<body>
  <div id="imagens">
    <input type="image" id="imagem1" src="wave1.png" onclick="movimento1()">
    <input type="image" id="imagem2" src="wave2.png" onclick="movimento2()">
    <input type="image" id="imagem3" src="wave3.png" onclick="movimento3()">
    <input type="image" id="imagem4" src="wave4.png" onclick="movimento4()">
    <input type="image" id="imagem5" src="wave5.png" onclick="movimento5()">
  </div>
  <script src="script.js"></script>
</body>

</html>

javascript html css wordpress website

1 answer

0

I can’t understand what you’re doing, but it’s possible to reduce code. You can create image tags dynamically, reduce functions to a single function with parameter, use CSS selectors, and use a CSS class to change the style of the clicked element.

I hope I’ve helped.

var imagens = document.getElementById("imagens");

function movimento(idx) {
  let input = imagens.children.item(idx - 1);
  input.classList.toggle('clicked');
}

window.addEventListener("load", function(){
  for(const i of [1,2,3,4,5]){
    let input = document.createElement("input");
    input.setAttribute("type", "image");
    input.setAttribute("src", `wave${i}.png`);
    input.setAttribute("onclick", `movimento(${i})`);
    imagens.appendChild(input);  
  }
})
#imagens input {
  width: 100%;
  height: 320px;
  position: relative;
  transition: 2s;
}

#imagens input.clicked {
  margin-bottom: 120px;
  margin-top: -160px;
}

#imagens input:nth-child(2) {
  top: -180px;
}

#imagens input:nth-child(3) {
  top: -360px;
}

#imagens input:nth-child(4) {
  top: -540px;
}

#imagens input:nth-child(5) {
  top: -720px;
}
<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>Document</title>
  <link rel="stylesheet" href="estilo.css">
</head>

<body>
  <div id="imagens">
  </div>
  
  <script src="script.js"></script>
</body>

</html>

Browser other questions tagged javascript html css wordpress website

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