How to Summarize the Same Process in javascript

How do I summarize the same process in javascript?

const but = document.getElementById("but");
const trend = document.getElementById("trend");

but.addEventListener("click", function(){
  if(trend.style.visibility=="visible"){
    // Hide as hidden
    trend.style.visibility="hidden";
  } else{
    // Visible View
    trend.style.visibility="visible";
  }

const but2 = document.getElementById("but2");
const trend2 = document.getElementById("trend2");
// Hide initial display
trend2.style.visibility="hidden";

but2.addEventListener("click", function(){
  if(trend2.style.visibility=="visible"){
    // Hide as hidden
    trend2.style.visibility="hidden";
  } else{
    // Visible View
    trend2.style.visibility="visible";
  }
});

const but3 = document.getElementById("but3");
const trend3 = document.getElementById("trend3");
// Hide initial display
trend3.style.visibility="hidden";

but3.addEventListener("click", function(){
  if(trend3.style.visibility=="visible"){
    // Hide as hidden
    trend3.style.visibility="hidden";
  } else{
    // Visible View
    trend3.style.visibility="visible";
  }
});

javascript css

2022-09-30 19:46

3 Answers

 document.getElementById('buttons').addEventListener('click', function(e){
    if(e.target.dataset.trend==null)return;
    document.getElementById(e.target.dataset.trend).classList.toggle('hide');
});

.hide{
    visibility: hidden;
}

<divid="buttons">
  <button data-trend="trend1" type="button">trend1</button>
  <button data-trend="trend2" type="button">trend2</button>
  <button data-trend="trend3" type="button">trend3</button>
</div>

<divid="trend1">111</div>
<divid="trend2" class="hide">222</div>
<divid="trend3" class="hide">333</div>

Is it like this?

2022-09-30 19:46

If successful, controlling visibility may be possible only with a JavaScript-free CSS.

[data-sync-with]{
  visibility: hidden;
}

# but1: checked~[data-sync-with="but1",
# but2: checked to [data-sync-with="but2",
# but3: checked~[data-sync-with="but3"]{
  visibility:visible;
}

<input type="checkbox" id="but1"checked><label for="but1">display</label>1;
<input type="checkbox" id="but2"><label for="but2">View trend2</label>
<input type="checkbox" id="but3"><label for="but3">View trend3</label>
<div data-sync-with="but1">111</div>
<div data-sync-with="but2">222</div>
<div data-sync-with="but3">333</div>

2022-09-30 19:46

Instead of defining the event response function to register with addEventListener() separately for each element, you just need to specify a common response function.

In addition to focusing on visibility and processing events for each individual element,
Define a special class for the element you want to change visibility to. You can also configure event processing for that class.
There is no guarantee that the function below will work, but I will write it down as a hint.

functionalterVisibility(){
    let visibility = this.style.visibility;

    // if(visibility==="visible")then {
    //    this.style.visibility="hidden";
    //}
    // else {
    //    this.style.visibility="visible";
    //}
    this.style.visibility=visibility==="visible"?"hidden":"visible";
};

2022-09-30 19:46

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656