Question 305944 in Html Question posted in
Some basic documentation can be found here.

Html – How to specify only the id of the appearing text, without specifying the ids of the hiding texts?

When you click on a certain button, a certain text is displayed, and when you click on another button, the text changes to another one. The problem is that I need to indicate all possible identifiers of texts that need to be hidden. How to specify only the id of the appearing text, without specifying the ids of the hiding texts?
I don’t know English well, so I used Google translator.

 function hideh1(Id){
   document.getElementById(Id).style.display = "none";
 }

 function showh1(Id){
   document.getElementById(Id).style.display = "block";
 }
<button onclick="showh1('Text11'); hideh1('Text00');
  hideh1('Text22'); hideh1('Text33')">Text1</button>
<button onclick="showh1('Text22'); hideh1('Text00');
  hideh1('Text11'); hideh1('Text33')">Text2</button>
<button onclick="showh1('Text33'); hideh1('Text00');
  hideh1('Text11'); hideh1('Text22')">Text3</button>
<button onclick="showh1('Text00'); hideh1('Text11');
  hideh1('Text22'); hideh1('Text33')">Text00</button>

<h1 id="Text00">Text00</h1>
<h1 id="Text11" style="display:none">Text11</h1>
<h1 id="Text22" style="display:none">Text22</h1>
<h1 id="Text33" style="display:none">Text33</h1>
Tags:

2

Answers


  1. 0

    You can hide all h1 elements or, you can hide all elements that have an ID that starts with Text or, you can give all elements a class name and then hide all elements that have that class name.

    Here is how the last approach that I’ve mentioned looks like:

    function showh1(Id) {
  for (let element of document.getElementsByClassName('elm')) {
    element.style.display = 'none';
  }
  document.getElementById(Id).style.display = "block";
}
    <button onclick="showh1('Text11');">Text1</button>
<button onclick="showh1('Text22');">Text2</button>
<button onclick="showh1('Text33');">Text3</button>
<button onclick="showh1('Text00');">Text00</button>

<h1 class="elm" id="Text00">Text00</h1>
<h1 class="elm" id="Text11" style="display:none">Text11</h1>
<h1 class="elm" id="Text22" style="display:none">Text22</h1>
<h1 class="elm" id="Text33" style="display:none">Text33</h1>
    Login or Signup to reply.
  2. 0
    1. put all text ids in an array.
    2. create a function that loops through the array, and hides it if it is not to be shown.
    // 1. put all text ids in an array
const alltexts = ["Text00","Text11","Text22","Text33"];

function hideh1(Id){
    document.getElementById(Id).style.display = "none";
}

function showh1(Id){
    document.getElementById(Id).style.display = "block";
}

// 2. create a function that loops through the array, and hides it if it is not to be shown.
function hideAllExcept(exceptId) {
    alltexts.forEach((id)=> exceptId===id? showh1(id):hideh1(id));
}
    <button onclick="hideAllExcept('Text11');">Text1</button>
<button onclick="hideAllExcept('Text22');">Text2</button>
<button onclick="hideAllExcept('Text33');">Text3</button>
<button onclick="hideAllExcept('Text00');">Text00</button>

<h1 id="Text00">Text00</h1>
<h1 id="Text11" style="display:none">Text11</h1>
<h1 id="Text22" style="display:none">Text22</h1>
<h1 id="Text33" style="display:none">Text33</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search