Question 190400 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Best practice to change the text of a div in html with button

I’m looking for the best practice to change the text content of an element on my website’s page.

I actually have 4 buttons (I aim for 9). Each button should be able to change the text depending on which one is clicked last.

Here is the html part

<head>
</head>
<body>
<div class="col-12">
  <button class="button-pltfrm button-ptf-1">Button 1</button>
  <button class="button-pltfrm button-ptf-2">Button 2</button>
  <button class="button-pltfrm button-ptf-3">Button 3</button>
  <button class="button-pltfrm button-ptf-4">Button 4</button>
  </div>
  <div class="col-12 pltfrm-distrib-wrapper">
    <div>
      <p id="change-txt" class="horaire-distrib">
        I wanna change this text to something else
      </p>
    </div>
  </div>
</body>

I’ve actually tried to way to do it. First one is by using jquery :

$(".button-pltfrm").click(function () {
    if($(this).hasClass("button-ptf-1"))
        $("#change-txt").text("This text belong to the first button");
    if($(this).hasClass("button-ptf-2"))
        $("#change-txt").text("This text belong to the second button");
    if($(this).hasClass("button-ptf-3"))
        $("#change-txt").text("This text belong to the third button");
    if($(this).hasClass("button-ptf-4"))
        $("#change-txt").text("This text belong to the fourth button");
  });

Here is a link with a jsfiddle doing the exact same thing.
[1]https://jsfiddle.net/4m0z8srb/20/

I find the fact that I have to do a test for each tag of each button rather unclear. It also need to modify javascript file each time I want to add a button.

I tried another version, who seems to be a bit more clear. In this one, the buttons are the ones calling a function in raw JavaScript. They call the function with the argument that the text is going to change into. Here is the html code (I had to modify it) :

<head>
</head>
<body>
<div class="col-12">
  <button onclick="chng_txt('This text belong to the first button')" class="button-pltfrm">Button 1</button>
  <button onclick="chng_txt('This text belong to the second button')" class="button-pltfrm">Button 2</button>
  <button onclick="chng_txt('This text belong to the third button')" class="button-pltfrm">Button 3</button>
  <button onclick="chng_txt('This text belong to the fourth button')" class="button-pltfrm">Button 4</button>
  </div>
  <div class="col-12 pltfrm-distrib-wrapper">
    <div>
      <p id="change-txt" class="horaire-distrib">
        I wanna change this text to something else
      </p>
    </div>
  </div>
</body>

<script>
var cameleon_txt = document.getElementById("change-txt");
function chng_txt(text)
{
    cameleon_txt.innerHTML = text;
}
</script>

I also added a link to an other jsfiddle with this implementation.
[2]https://jsfiddle.net/e8x45chn/7/.
In this version, I really do not like the fact that the text is inside the parameter of the function called by onclick. It makes the line really long if I want to put a bigger text.

As you can see, I tried two options with JS that are working but I would like to know if there is a good way to do it maybe with CSS in the idea that the text might need to be translated later on.

I am looking for the best practice and ideally the one that is going to be clearer in case someone has to work on the code after me.

Tags:

2

Answers


  1. 0

    I like using an array or object as a button/text map, using button index as the key. This keeps your data out of your markup (and somewhat isolated within your script for easier maintenance–it could come from another file, for example).

    Here I’m using a simple array. You could use an object instead to correlate indexes or IDs to the text values.

    Here’s a helpful resource as you (now or eventually) transition away from jQuery, which I consider an awesome but increasingly unnecessary library.

    const textMap = ['text one', 'text two', 'text three', 'text four'];

document.querySelectorAll('.button-pltfrm').forEach(el => {
  el.onclick = () => {
    const index = [...el.parentNode.children].indexOf(el);
    chng_txt(textMap[index]);
  };
});

function chng_txt(text) {
  document.querySelector('#change-txt').innerHTML = text;
}
    <body>
  <div class="col-12">
    <button class="button-pltfrm">Button 1</button>
    <button class="button-pltfrm">Button 2</button>
    <button class="button-pltfrm">Button 3</button>
    <button class="button-pltfrm">Button 4</button>
  </div>

  <div class="col-12 pltfrm-distrib-wrapper">
    <div>
      <p id="change-txt" class="horaire-distrib">
        I wanna change this text to something else
      </p>
    </div>
  </div>
    Login or Signup to reply.
  2. 0

    You can put your text into data-text attribute:

    $('.button-list').on('click', 'button', e =>  
  $('#change-txt').text($(e.target).data('text'))
);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 button-list">
  <button data-text="Selected 1">Button 1</button>
  <button data-text="Selected 2">Button 2</button>
  <button data-text="Selected 3">Button 3</button>
  <button data-text="Selected 4">Button 4</button>
  </div>
  <div class="col-12 pltfrm-distrib-wrapper">
    <div>
      <p id="change-txt" class="horaire-distrib">
        I wanna change this text to something else
      </p>
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search