Thomas Varberg Thomas Varberg - 3 months ago 6
CSS Question

Make image and text as default

So I have a little trouble by giving a appropriate title for this, so please correct me with your input.

Tapping in to my question (I have added a picture for clarification) When I click on button 1 a picture will show up to the left and a text will show up in the middle. If a click on button 2 a new picture will show up to the left and a new text will show up in the middle.

So my question is: How to I set button 1 as default so the picture and text connected with that button will show up when the website is loaded. Im new to JS so please explain by detail. Thanks. [![



function changeText(value) {
var div = document.getElementById("div");
var text = "";
var image = "";

if (value == 1) text += "<span class='custom_text_h_w'>this is picture one</span> <br> <img class='custom_h_w' src='images/consumers_1.png'/>";
if (value == 2) text += "<span class='custom_text_h_w'>this is picture two</span> <br> <img class='custom_h_w' src='images/consumers_2.png'/>";
if (value == 3) text += "<span class='custom_text_h_w'>this is picture tree</span> <br> <img class='custom_h_w'src='images/consumers_3.png'/>";

div.innerHTML = text;
}

.custom_h_w{
top: 1700px;
left: 100px;
height:456px;
width: 342px;
position: absolute;
}

.custom_text_h_w{
top: 1700px;
right: 800px;
position: absolute;
}

<a href="javascript: changeText(1);">
<img id="searchconsumers" src="images/search.png" width="60px" height="60px" alt="abc" />
</a>
<a href="javascript: changeText(2);">
<img id="exploreconsumers" src="images/explore.png" width="60px" height="60px" top="1700px" right="700px" alt="abc" />
</a>
<a href="javascript: changeText(3);">
<img id="funconsumers" src="images/fun.png" width="60px" height="60px" alt="abc" />
</a>
<div id="div"></div>





]1]1

Answer

You can start the JavaScript function with the page with an HTML body tag like this:

<body onload="changeText(1);">

Alternatively, you can use JavaScript to do the same thing:

document.addEventListener('DOMContentLoaded', function() {
    changeText(1);
}

The 'DOMContentLoaded' event will trigger when the page is completely done loading in the user's browser.