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?