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 个答案: