how do I write the function for getting different background image and text upon clicking its designated button?

Question

I am aware of the script that calls the text according to its button, but I have no clue how I can place a background image on that text. My plan is that the background image can also change according to the button that was clicked. Here is what I've done so far...

This is actually for a school project and I want it to be as action-oriented or somewhat interactive in a way with just functions and methods. I also wanted to add another cell table and just place an image there with some texts just like a gaming avatar profile.

 function myFunction(elem) { var x = document.getElementById("js-description"); var description = elem.getAttribute('data-description'); x.innerHTML = description; var button = document.getElementsByClassName('js-button'); for (var i = 0; i < button.length; i++) { button[i].classList.remove('active-buton'); } elem.classList.add('active-button'); }

 body, html { height: 100%; background-color: #190a48; margin: 0; }.btn-group button { font-family: SF; letter-spacing: 5px; background-color: transparent; /* Green background */ border: 1px solid #504c7c; /* Green border */ color: white; /* White text */ padding: 2.5% 1%; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ width: 15vw; height: 6vw; /* Set a width if needed */ display: block; /* Make the buttons appear below each other */ margin-left: 20%; border-radius: 4%; -webkit-box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; -moz-box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a; font-size: 1vw; }.btn-group button:not(:last-child) { border-bottom: none; /* Prevent double borders */ }.active-button:hover { background-color: #83a1a7; }.description { text-align: center; color: white; font-size: 50px; font-family: St; letter-spacing: 3px; }

 <table> <tr> <td rowspan="2" width=1000px; style="border: 7px solid #040434;"> <div id="js-description" class="description"> </div> </td> </tr> <tr> <td rowspan="4" height=450px; class="imgxbtn" style="transparent;"> <div class="js-button btn-group"> <button data-description="Vivamus, moriendum est" onclick="myFunction(this)"> HOBBY </button> <button data-description="Forsan et haec olim meminisse iuvabit" onclick="myFunction(this)"> MEMORY </button> <button data-description="Sapere aude" onclick="myFunction(this)"> CONQUEST </button> <button data-description="Audentes fortuna iuvat" onclick="myFunction(this)"> AMBITION </button> <button data-description="Ad astra per aspera" onclick="myFunction(this)"> TARGET </button> </div> </td> </tr> <tr> <td rowspan="3" height=250px; style="border: 5px solid #040434; opacity:35%; background-color: #9a5eaa;">content</td> </tr> <tr> </tr> </table>

Answer 1

You are almost there. You can use the same aproach for the background image as you already do for the description text. Just define another data-attribute with your image-url and set the respective CSS property like this:

 function onButtonClick() { var descriptionElement = document.getElementById("description"); descriptionElement.innerHTML = event.target.dataset.description; descriptionElement.style['background-image'] = event.target.dataset.backgroundImage; }

 <div id="description">Press one of the buttons below.</div> <button data-description="First description" data-background-image="linear-gradient(red, orange)" onclick="onButtonClick()">first</button> <button data-description="Second description" data-background-image="linear-gradient(teal, green)" onclick="onButtonClick()">second</button>

I use gradients here because I don't have an image at hand. To use an actual image you can specify it like data-background-image="url('path/to/your/image')" .