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>