如何使用JavaScript显示图像和文本搜索结果？

Question

我有2个下拉选择表单，用于验证用户使用“提交”按钮选择的选项，但是我不确定将所需内容“添加”到搜索结果的正确方法。 理想情况下，这将是带有标题和描述的图像。

我尝试使用有效的.innerHTML添加图像，但这似乎不是正确的解决方法。

有人可以指出我正确的方向吗？ 也许通过提供一个例子。

 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>

Answer 1

您的方法没有错。 这是另一种方法：

 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>

如何使用JavaScript显示图像和文本搜索结果？

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-12-05 17:14:22

如何使用JavaScript显示图像和文本搜索结果？

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-12-05 17:14:22

解决方案1
0 已采纳 2018-12-05 17:14:22