How can I add a url image in my function for each switch case? (so that the image displays inside the mybox div along with the text on button click)
function tests() {
let combo = document.getElementById("string_determine");
let div = document.getElementById("mybox");
let string_determine;
switch (combo.options[combo.selectedIndex].text) {
case '"red" + "blue"':
string_determine = "purple";
div.style.color = "purple";
break;
case '"blue" + "green"':
string_determine = "turquoise";
div.style.color = "turquoise";
break;
case '"green" + "red"':
string_determine = " brown";
div.style.color = "brown";
break;
default:
string_determine = "NONE";
}
console.log(string_determine);
document.getElementById("mybox").innerHTML = string_determine;
}<!doctype html>
<html>
<script src="test.js"></script>
<select name="string_determine" id="string_determine">
<option value=>Select Value</option>
<option value='"red" + "blue"'>"red" + "blue"</option>
<option value='"blue" + "green"'>"blue" + "green"</option>
<option value='"green" + "red"'>"green" + "red"</option>
</select>
<button onclick="tests()">Yes</button>
<!-- this is the box -->
<div class="container">
<h3> Selection </h3>
<div id="mybox" class="box">
<label for="mybox"> </label>
<output name="mybox" type="text"><br>
</div>
</div>
</body>
</html>Advertisement
Answer
The code below should help you.
Have a look at the following line:
document.getElementById("mybox").innerHTML =
"<img src='" + IMAGE_SOURCE + string_determine + "'><p>" + string_determine + "</p>";
When running the code snippet below, you should wait a few seconds for the image to load from the internet.
const IMAGE_SOURCE = "https://source.unsplash.com/random/100x100/?";
const IMAGE_EXTENSION = "";
// const IMAGE_SOURCE = "https://example.com/images/";
// const IMAGE_EXTENSION = ".png";
function tests() {
let combo = document.getElementById("string_determine");
let div = document.getElementById("mybox");
let string_determine;
switch (combo.options[combo.selectedIndex].text) {
case '"red" + "blue"':
string_determine = "purple";
div.style.color = "purple";
break;
case '"blue" + "green"':
string_determine = "turquoise";
div.style.color = "turquoise";
break;
case '"green" + "red"':
string_determine = "brown";
div.style.color = "brown";
break;
default:
string_determine = "NONE";
}
let myBoxHTML = `<img src="${IMAGE_SOURCE}${string_determine}${IMAGE_EXTENSION}"><p>${string_determine}</p>`;
console.log(myBoxHTML);
document.getElementById("mybox").innerHTML = myBoxHTML;
}<select name="string_determine" id="string_determine"> <option value=>Select Value</option> <option value='"red" + "blue"'>"red" + "blue"</option> <option value='"blue" + "green"'>"blue" + "green"</option> <option value='"green" + "red"'>"green" + "red"</option> </select> <button onclick="tests()">Yes</button> <div class="container"> <h3>Selection</h3> <div id="mybox" class="box"> </div> </div> <script src="app.js" async defer></script>