Swap texts within html

artvanderlay
April 17, 2023
198 views
3 votes
5 Answers

I need to change visibilities of two texts, but I don’t want a toggle button, just one icon that – when clicked – hides text1 and shows text2, and returns back when clicked again.

I use:

<span onclick="document.getElementById('text1').innerHTML = (this.innerHTML == document.getElementById('text1').innerHTML) ? document.getElementById('text2').innerHTML : document.getElementById('text1').innerHTML"><i class="fa fa-comments" aria-hidden="true"></i></span>and

<div class="content">
  <div id="text1">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id="text2">
    <h1>Välkommen</h1>
    <p>Swedish text</p>
  </div>
</div>

Edit: Miguel G’s answer solves it. However, I still try to figure out how to have the text change in other sections across the entire page.

Tags: html javascript

Answers

Ok, I made a lot of changes in your code, I don’t know if this was exactly what you were expecting, but here it is.
To achieve the desired behavior of showing the content corresponding to each text when the user clicks on its respective element, you will need to make some changes to the HTML code and add JavaScript.
In this example, I’ve added code to toggle the display of text corresponding to the clicked button. If the text is visible, it will be hidden and vice versa. In addition, I added a loop to hide all texts except the text corresponding to the current button that was clicked. With these changes, you can click the buttons to show and hide the corresponding content.

<style>
  .text {
    display: none;
  }
</style>

<!-- add a class to each button -->
<span class="btn" data-target="#text1"><i class="fa fa-comments" aria-hidden="true"></i>English</span>
<span class="btn" data-target="#text2"><i class="fa fa-comments" aria-hidden="true"></i>Swedish</span>

<div class="content">
  <div id="text1" class="text">
    <h1>Welcome</h1>
  </div>
  <div id="text2" class="text">
    <h1>Välkommen</h1>
  </div>
</div>

<!-- JavaScript code -->
<script>
  const buttons = document.querySelectorAll('.btn');
  const texts = document.querySelectorAll('.text');

  buttons.forEach(button => {
    let isTextVisible = false;
    button.addEventListener('click', () => {
      // Get button target
      const target = button.getAttribute('data-target');
      const text = document.querySelector(target);
      // Hides all texts except the current text
      texts.forEach(t => {
        if (t !== text) {
          t.style.display = 'none';
        }
      });
      // Shows or hides the text corresponding to the clicked button
      if (isTextVisible) {
        text.style.display = 'none';
        isTextVisible = false;
      } else {
        text.style.display = 'block';
        isTextVisible = true;
      }
    });
  });
</script>

- MiguelG
- April 17, 2023 at 9:27 pm
- 0 votes
0
EDIT:
Okay I think I know what you are asking for. You want to be able to click a button or something to switch the inner HTML of these two divs.
You can accomplish that as follows:
```
<button type="button" onclick="toggle()">Click Me!</button
<div class="content" style="display: inline;">
  <div id="text1">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id="text2" style="display: none;">
    <h1>Välkommen</h1>
    <p>Swedish text</p>
  </div>
</div>
```
For your HTML, you can put the onclick property directly into the top div, or you can put it in a separate button. That is up to you. For this one, I added a button on top of the div to allow you to toggle back and forth between the two options. I also put some initial styling in the divs to show whats happening.
```
  const toggle = () => {
  
    let el1 = document.getElementById("text1");
    let el2 = document.getElementById("text2");

    el1.style.display.includes('none') ? el1.style.display = 'inline' : el1.style.display = 'none';
    el2.style.display.includes('none') ? el2.style.display = 'inline' : el2.style.display = 'none';
  }
```
This is the JavaScript function that will swap your divs. Basically now we are just inspecting the style of each div and if it’s visible, we make it invisible, and if it’s not visible, we make it visible. By using the none property, we assure that they will show up in the same spot.

You can put this function inside a script tag and it should work! Let me know how it goes.
Login or Signup to reply.

I don’t know if this is correct, but i add this answer just in case.

function onloadtext(){
    document.getElementById("text1").innerHTML = `<h1>Welcome</h1><p>English text</p>`;
}
 const toggle = () => {
  let el1 = document.getElementById("text1");
  let btn = document.getElementById("toggle");
  if(btn.value == 'Swedish'){
    btn.value = 'English';
    el1.innerHTML = `<h1>Välkommen</h1><p>Swedish text</p>`;
  }else{
    btn.value = 'Swedish';
    el1.innerHTML = `<h1>Welcome</h1><p>English text</p>`;
  }
}

<body onload="onloadtext()">
 Translate in:<input type="button" id="toggle" onclick="toggle()" value="Swedish">
 <div class="content">
    <div id="text1"></div>
 </div>
</body>

I understand that instead of swapping the contents of text1 and text2, you want to hide one and make the other visible. I hope the code below helps.

var text1=document.getElementById('text1');
var text2=document.getElementById('text2');

const swap = () => {
  if(text1.classList.contains("hidden")){ //if text1 contains class 'hidden'
    text1.classList.remove("hidden"); //remove hidden class from text1
    text2.classList.add("hidden"); //add hidden class to text2
  }
  else{
    text1.classList.add("hidden"); //add hidden class to text1
    text2.classList.remove("hidden"); //remove hidden class from text2
  }
}

.hidden{
  display:none;
}

<button onclick="swap()">Switch Text</button>

<div class="content">
  <div id="text1">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id="text2" class="hidden">
    <h1>Välkommen</h1>
    <p>Swedish text</p>
  </div>
</div>

This should work.


<div id="swap-button" style="cursor: pointer;">Click Me</div>

<div class="content">
  <div id="text1">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id="text2">
    <h1>Välkommen</h1>
    <p>Swedish text</p>
  </div>
</div>

<script>
  const swapText = () => {
    const text1Element = document.getElementById('text1');
    const text2Element = document.getElementById('text2');
    const text1 = text1Element.innerHTML;
    text1Element.innerHTML = text2Element.innerHTML;
    text2Element.innerHTML = text1;
  };

  document.getElementById('swap-button').onclick = () => {
    swapText();
  };
</script>

Just add your icon instead of


<div id="swap-button" style="cursor: pointer;">Click Me</div>

Please signup or login to give your own answer.

Click here to cancel reply.