Using Javascript to change a div's text depending on what button is pressed

Question

I'm sure this is easier than what I'm making it out to be, but - I need to change a paragraph depending on what button is pressed. I want to use the same buttons as the ones I click on to change the main-img.

To reiterate, my goal is: if I click on a button, for example, Executioner, I want the image to change to the executioner image (like i already have set up) and subclassDesc to change to the appropriate subclass information that I need.

This is the HTML (I dont think the mainbox information is super relevant for this question so ignore that if you will - I just need to know how to properly change the stated information.)

    <div id="imgContain">
        <img id="main-img" src="default.png">
    </div>
    <div id="mainBox">
        <div class="tabMain">
            <button class="tablinks active" onclick="mainTab(event, 'Overview')" id="defaultOpen">Overview</button>
            <button class="tablinks" onclick="mainTab(event, 'Subclasses')">Subclasses</button>
            <button class="tablinks" onclick="mainTab(event, 'Spells')">Spells</button>
        </div>

        <div id="Overview" class="tabcontentMain">
            <h3>Overview</h3>
            <p>blablabla.</p>
            <p id="subclassDesc">
                <h3>Insert Subclass Here</h3>
                insert subclass info here
            </p>    
        </div>
        <div id="Subclasses" class="tabcontentMain">
            <h3>Subclasses</h3>
            <p>
                <button id="subclass" onclick="changeImg('./assets/010.-Arbalest.png')">Arbalest</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/011.-Dreadnaught.png')">Dreadnought</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/012.-Executioner.png')">Executioner</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/013.-Lancer.png')">Lancer</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/014.-Titan.png')">Titan</button>
            </p>
        </div>

This is the Javascript

function changeImg(uri) {
    var image = document.getElementById('main-img');

    image.src = uri;
}

function insertTxt() {
    const button = document.getElementById('subclass');
    const p = document.getElementById('subclassDesc');

//what do i do here? Do i even need this?//
}

I just need answers, I'm very new to Javascript and don't really fully understand everything. I don't even know what to do with the function. Do i need if else statements? How do I do all this on the same function with different parameters?

Answer 1

From your question, it is not entirely clear where you want to get the subclass information from, so here is a bit of an improvisation from my side. I hope it helps.

const info = {
  'Arbalest': {
    text: 'Arbalest is awesome',
    url: './assets/010.-Arbalest.png'
  },
  'Dreadnought': {
    text: 'Dreadnought is awesome',
    url: './assets/011.-Dreadnaught.png',
  },
  'Executioner': {
    text: 'Executioner is awesome',
    url: './assets/012.-Executioner.png',
  },
  'Lancer': {
    text: 'Lancer is awesome',
    url: './assets/013.-Lancer.png',
  },
  'Titan': {
    text: 'Titan is awesome',
    url: './assets/014.-Titan.png',
  }
};

function onSubclassButtonClick(button) {
  const subclassName = button.innerText;
  const subclassData = info[subclassName];

  var image = document.getElementById('main-img');
  image.src = subclassData.url;

  const p = document.getElementById('subclassDesc');
  p.innerHTML = `<h3>${subclassName}</h3>${subclassData.text}`;
}

<div id="imgContain">
  <img id="main-img" src="default.png">
</div>
<div id="mainBox">
  <div class="tabMain">
    <button class="tablinks active" onclick="mainTab(event, 'Overview')" id="defaultOpen">Overview</button>
    <button class="tablinks" onclick="mainTab(event, 'Subclasses')">Subclasses</button>
    <button class="tablinks" onclick="mainTab(event, 'Spells')">Spells</button>
  </div>

  <div id="Overview" class="tabcontentMain">
    <h3>Overview</h3>
    <p>blablabla.</p>
    <p id="subclassDesc">
      <h3>Insert Subclass Here</h3>
      insert subclass info here
    </p>
  </div>
  <div id="Subclasses" class="tabcontentMain">
    <h3>Subclasses</h3>
    <p>
      <button onclick="onSubclassButtonClick(this)">Arbalest</button>
      <br><br>
      <button onclick="onSubclassButtonClick(this)">Dreadnought</button>
      <br><br>
      <button onclick="onSubclassButtonClick(this)">Executioner</button>
      <br><br>
      <button onclick="onSubclassButtonClick(this)">Lancer</button>
      <br><br>
      <button onclick="onSubclassButtonClick(this)">Titan</button>
    </p>
  </div>

Answer 2

Do the text change during the same on click function since that is what you want. Your keyword for me is 'and'.

"set up) and subclassDesc"

Therefore I suggest you do away with the two separate functions and have one function that does it all. Rename the changeImg function to something more generic like onSubclassButtonClick and add the extra functionality you need.

Answer 3

It would be better to store details in the data attributes in your case (it's more common practice), like:

<p>
    <button class="subclass" data-src="./assets/010.-Arbalest.png">Arbalest</button>
    <button class="subclass" data-src="./assets/011.-Dreadnaught.png">Dreadnought</button>
    ...
</p>

And create a listener for a click event for all buttons with the class subclass (classes are better to use because id attr must be unique on the page)

const image = document.getElementById('main-img');
const p = document.getElementById('subclassDesc');

[...document.querySelectorAll(".subclass")].forEach((element) => {
    element.addEventListener('click', function(){
        const src =  element.dataset.src
        const text = element.innerText; // or innerHTML
        // setting image src
        image.src = src;
        // setting p HTML
        p.innerHTML = `<h3>${text}</h3>${text}`;
    })
})

You can still use the onclick attribute. For this reason, you will need the following, but it will add more code to your HTML:

<p>
    <button class="subclass" onclick="updateData(this)" data-src="./assets/010.-Arbalest.png">Arbalest</button>
    <button class="subclass" onclick="updateData(this)" data-src="./assets/011.-Dreadnaught.png">Dreadnought</button>
    ...
</p>

function updateData(element){
    const src =  element.dataset.src
    const text = element.innerText; // or innerHTML
    // setting image src
    image.src = src;
    // setting p HTML
    p.innerHTML = `<h3>${text}</h3>${text}`;
}