How to display images and text search results using JavaScript?

Question

I have 2 dropdown select forms which validate the options the user chooses with a submit button but I'm not sure of the correct way to "add" my desired content to the search results. Ideally, this would be an image with a header and description.

I tried adding an image using .innerHTML which works but this doesn't seem like the right way to go about it.

Can someone point me in the right direction? Perhaps by providing an example.

function Confirm(){
 var people = document.getElementById ("people");
 var food = document.getElementById ("food");

 if ((people.value == "") && (food.value == ""))
  { 
   alert ("option zero"); //test 
  } 

 else if ((people.value == "1") &&(food.value == "1"))
  { 
   alert ("option one"); //test
   document.getElementById("result1").innerHTML = "<img src='images/tourism.jpg'>";
  } 

 else if ((people.value == "2") && (food.value == "2"))
  { 
   alert ("option two"); //test
   // document.getElementById("result1").innerHTML = "supasdasdasd";
  } 
}

#result1{
 height: 400px;
 width: 400px;
 background-color: red;
}

#result2{
 height: 400px;
 width: 400px;
 background-color: blue;
}

img {
 max-width: 100%;
}

<body>

<form>
<select id="people"> 
      <option value=""> Please Select </option>
      <option value="1"> one person  </option>
      <option value="2"> two person </option>
</select>

<select id="food"> 
      <option value=""> Please Select </option>
      <option value="1"> apple </option>
      <option value="2"> banana  </option>
</select>

<input type="button" value="confirm" onclick="Confirm()" />
</form>

 <div id="result1">

 </div>

 <div id="result2">

 </div>

  </body>

What's the actual question? How to insert HTML? If yes so it is a dupe of https://stackoverflow.com/questions/584751/inserting-html-into-a-div — lucifer63, Dec 05 '18 at 16:13
@lucifer63 question is about correct way to show the images as a search result. More of an "correct approach" based question.. — Subhasish Bhattacharjee, Dec 05 '18 at 16:15
I don't think there's any _correct_ approach, you can do it the way you like to do it - take user input, give out the result. — lucifer63, Dec 05 '18 at 16:20
@lucifer63 After i take the user input i want to give out/show the correlating result formatted in divs. "injecting" an image into the html div using inner.HTML doesn't seem to be the right approach because then i have to inject a paragraph and a title and then do that for content in each div, as a beginner i'm sure thats not the most intuitive way. — jjkin, Dec 05 '18 at 16:33
@jjkin, you can create (document.createElement) and append (Element.appendChild) elements or use a template-based approach (when you have some HTML template in which variables get arranged in some way, maybe ES6 template string template), the choice is still up for you — lucifer63, Dec 05 '18 at 16:37

Victoria Le · Accepted Answer · 2018-12-05T17:20:13.367

There's nothing wrong with your approach. Here is another way to do it:

function Confirm(){
 var people = document.getElementById ("people");
 var food = document.getElementById ("food");

 if ((people.value == "") && (food.value == ""))
 { 
     alert ("option zero"); //test 
 } 

 else if ((people.value == "1") &&(food.value == "1"))
 { 
            //alert ("option one"); //test
            var image = document.createElement("img");
            image.src = "https://picsum.photos/200";
            image.setAttribute('class', 'img');//set attribute as class
            var paragraph = document.createElement("p");
            paragraph.innerHTML = "text";
            var result1 = document.getElementById("result1");
      
     result1.appendChild(image);//first, append image element
            result1.appendChild(paragraph);//second, append text element
 } 

 else if ((people.value == "2") && (food.value == "2"))
 { 
     alert ("option two"); //test
 } 
}

#result1{
 height: 400px;
 width: 400px;
 background-color: tomato;
}

#result2{
 height: 400px;
 width: 400px;
 background-color: blue;
}

.img {
  border: 10px green solid;
}

<body>

<form>
<select id="people"> 
      <option value=""> Please Select </option>
      <option value="1"> one person  </option>
      <option value="2"> two person </option>
</select>

<select id="food"> 
      <option value=""> Please Select </option>
      <option value="1"> apple </option>
      <option value="2"> banana  </option>
</select>

<input type="button" value="confirm" onclick="Confirm()" />
</form>

 <div id="result1"></div>

 <div id="result2"></div>

</body>

How to display images and text search results using JavaScript?

1 Answers1