How can i add a url image in my function for each switch case?-CodePudding

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 >
  <h3> Selection </h3>
  <div id="mybox" >
    <label for="mybox"> </label>
    <output name="mybox" type="text"><br>
                </div>
            </div>
            </body>
    </html>

CodePudding user response：

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 >
  <h3>Selection</h3>
  <div id="mybox" >
  </div>
</div>

<script src="app.js" async defer></script>