CODEWITHSUNDEEP
javascriptjqueryhtml
Mark van der Dam
Mark van der Dam

Reputation: 161

I need help toggling text in javascript

So, I have a website that I am working on that has 3 h1 tags that I can click on to call a function, now when I click on it I want to set the innerHTML to something.

I am using HTML and jQuery for this and I have tried:

uitzendText.innerHTML = $('p#uitzendBureau').text(); But without success.

This is the HTML code:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
           <h1 class="mt-3" onclick="showText('uitzendBureau');">Uitzend<b class="text-orange">bureau</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('ymeKamminga');">Yme <b class="text-orange">Kamminga</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('koeriersDienst');">Koeriers<b class="text-orange">dienst</b></h1>
        </div>
    </div>
</div>
<div class="container mt-5">
    <p class="text-center" id="uitzendBureau">uitzend</p>
    <p class="text-center" id="ymeKamminga">yme</p>
    <p class="text-center" id="koeriersDienst">koerier</p>
</div>

And this is the Javascript code:

document.getElementById('uitzendBureau').innerHTML = '';
document.getElementById('koeriersDienst').innerHTML = '';

function showText(text) {
    let uitzendText = document.getElementById('uitzendBureau');
    let koeriersText = document.getElementById('koeriersDienst');
    let ymeText = document.getElementById('ymeKamminga');

    if (text === 'ymeKamminga') {
        console.log(text);
        ymeText.innerHTML = $('p#ymeKamminga').text();
    }
    if (text === 'uitzendBureau') {
        console.log(text);
        uitzendText.innerHTML = $('p#uitzendBureau').text();
        koeriersText.innerHTML = '';
        ymeText.innerHTML = '';
    }

}

The first two lines in the Javascript code are there because I want the visitor to only see the ymeText when the page first loads.

Now, I expect the text to change based on the tag they clicked, but this isn't happening.

I don't get any errors in the Console and the console.log(text); does give the expected result inside the if statements so it does come in the if.

Upvotes: 0

Views: 69

Answers (4)

RainyRain
RainyRain

Reputation: 305

single div version as Immortal Dude suggested:

 function showText(text) {
      $('#text-output').text(text);
  } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
           <h1 class="mt-3" onclick="showText('uitzendBureau');">Uitzend<b class="text-orange">bureau</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('ymeKamminga');">Yme <b class="text-orange">Kamminga</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('koeriersDienst');">Koeriers<b class="text-orange">dienst</b></h1>
        </div>
    </div>
</div>
<div class="container mt-5">
  <p class="text-center" id="text-output"></p>
</div>
Since you only display one text at once, using only 1 element to show the showText result might work as well.

Upvotes: 1

AlexSNorth
AlexSNorth

Reputation: 153

Ok, so I converted everything to jQuery to keep things simpler

First off, make sure that your code is within the <head></head> tags either by importing it through a file or in page code. Doing this makes your code work just fine for me.

Second, make sure you add the value text to whatever you put in the innerHTML or .text(), because adding an empty string to your div will just keep it empty.

uitzendText.innerHTML = $('p#uitzendBureau').text(); // p#uitzendBureau is empty, so you are putting an empty string back into an empty string.

Now if you follow my advice and you put this code between the head tags, it will work:

$(document).ready(function() {
    $("#uitzendBureau").text('');
    $("#koeriersDienst").text('');
});
function showText(text) {

    if (text === 'ymeKamminga') {
        console.log(text);
        $('p#ymeKamminga').text(text);
    }
    if (text === 'uitzendBureau') {
        console.log(text);
        $('p#uitzendBureau').text(text);
        $("#koeriersDienst").text('');
        $('p#ymeKamminga').text('');
    }

}

as soon as I made sure that the javascript was inside the head tags, your code was working just fine, so all I did was make sure your code also outputs to the DOM what I think your intentions were.

Upvotes: 1

RainyRain
RainyRain

Reputation: 305

Not sure if I understand the question currectly but you want the text in the onclick to appear in the p# element? I made an example for what I think what you mean (will add explanation if this indeed the case)

// reset the html of the elements
$('#uitzendBureau').html('');
$('#koeriersDienst').html('');

function showText(text) {
    // jquery way of selecting elements by their ID
    let uitzendText = $('#uitzendBureau');
    let koeriersText = $('#koeriersDienst');
    let ymeText = $('#ymeKamminga');

    if (text === 'ymeKamminga') {
        console.log('text ymeKamminga:',text);
        // set the text of the yme element to the desired value
        ymeText.html(text);
    }
    if (text === 'uitzendBureau') {
        console.log('text uitzendBureau', text);
        // set the text of the uitzend element to the desired value
        uitzendText.html(text);
        
        // unset the text of the other elements
        koeriersText.html('');
        ymeText.html('');
    }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
           <h1 class="mt-3" onclick="showText('uitzendBureau');">Uitzend<b class="text-orange">bureau</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('ymeKamminga');">Yme <b class="text-orange">Kamminga</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('koeriersDienst');">Koeriers<b class="text-orange">dienst</b></h1>
        </div>
    </div>
</div>
<div class="container mt-5">
    <p class="text-center" id="uitzendBureau">uitzend</p>
    <p class="text-center" id="ymeKamminga">yme</p>
    <p class="text-center" id="koeriersDienst">koerier</p>
</div>

Upvotes: 1

Dev Man
Dev Man

Reputation: 2137

The following code should work

$(document).ready(function() {
  let uitzendText = $('#uitzendBureau');
  let koeriersText = $('#koeriersDienst');
  let ymeText = $('#ymeKamminga');

  uitzendText.text('');
  koeriersText.text('');

  // Handle click events
  $(document).on('click', ".heading", function() {
    let el = $(this)
    let elementText = el.data('element-text')

    showText(elementText)
  })
  // Handle showing text
  function showText(text) {

    if (text === 'ymeKamminga') {
      ymeText.text(text);
    }
    if (text === 'uitzendBureau') {
      uitzendText.text(text);
      koeriersText.text('');
      ymeText.text('');
    }

  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4">
      <h1 class="mt-3 heading" data-element-text="uitzendBureau">Uitzend<b class="text-orange">bureau</b></h1>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
      <h1 class="mt-3 heading" data-element-text="ymeKamminga">Yme <b class="text-orange">Kamminga</b></h1>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
      <h1 class="mt-3 heading" data-element-text="koeriersDienst">Koeriers<b class="text-orange">dienst</b></h1>
    </div>
  </div>
</div>
<div class="container mt-5">
  <p class="text-center" id="uitzendBureau">uitzend</p>
  <p class="text-center" id="ymeKamminga">yme</p>
  <p class="text-center" id="koeriersDienst">koerier</p>
</div>

Questions

  1. Wouldn't a simple hide and show of elements work?
  2. if you are replacing text then wouldn't one div suffice?

Upvotes: 1

Related Questions