个人中心
gpt4 book ai didi

javascript - 如何根据下拉选择值使用 Javascript 更改图像？

转载 作者：行者123 更新时间：2023-11-28 09:11:20 25 4
gpt4 key购买 nike

我是 JavaScript 的完全菜鸟，但我已经成功地为用户制作了一个在左侧有 4 个下拉选择框的表单(州、汽车、年份、条件)。

用户进行下拉选择并单击下方的“计算” 按钮，然后该按钮会根据他们的输入运行一些简单的函数，并在表单右侧显示 4 个不同的值。

在表格中间是一张名为 car1.png 的图片，我想根据返回结果 3 的值更改它(即 if 0.07 显示“car2.png”，如果 0.06 显示“car3.png”。我已经尝试了所有我能想到的方法，并且阅读了许多关于“if”语句的教程，但我觉得我看错了地方。

鉴于我在这方面缺乏知识，如果我有任何想法如何尽可能简单地做到这一点，我们将不胜感激。

这是我到目前为止的想法:

<HTML>
<body>

<script type="text/javascript"> 
function calcform() 
{ 
with (document.form1) 

{ result1.value = +number1.value * .75 * 50}
{ result2.value = +number2.value * 1}
{ result3.value = +number3.value * 1}
{ result4.value = +number2.value * +number1.value}
} 
</script> 

</div>
<div class="span17">
<table><form name="form1" action=""> 

<h4>State :<br/>
<select name="number" id="number1">
        <option value="15">SA</option>
        <option value="16">VIC</option>
                <option value="17">NSW</option>
        <option value="10">QLD</option>
                <option value="19">NT</option>
        <option value="14">WA</option>
    </select></h4><br/> 
	
<h4>Car :<br/>

<select name="number" id="number4">
        <option value="1">Ford</option>
        <option value="2">Nissan</option>
                <option value="3">Toyota</option>
        <option value="4">Holden</option>
    </select></h4><br/> 
	
<h4>Year :<br/>
<select name="number" id="number2">
        <option value="0.1">1980</option>
        <option value="0.2">1981</option>
                <option value="0.3">1982</option>
        <option value="0.4">1983</option>
                <option value="0.5">1984</option>
        <option value="0.6">1985</option>
    </select></h4><br/> 
	
	<h4>Condition :<br/>
<select name="number3" id="number3">
        <option value="0.08">New</option>
        <option value="0.07">Used</option>
                <option value="0.06">Defect</option>
        <option value="0.05">Scrap</option>
    </select></h4><br/> 
	
	
<input type="button" id="Calculate" value="Calculate" 
onclick="calcform()" /><input type="reset" id="reset" value=" Clear "/></tr>

</span>

<div class="span20">

<br>
<br>
<img src="car1.png">

  </div>

<div class="span15">

<br/><tr><td><h4><strong></strong></h4><br/>
<h4>Result 1:<br /> 
<div class="span15">
<input type="text" id="result1" value="" size="40" /></h4><br/> 
</div>
<h4>Result 2:<br /> 
<input type="text" id="result2" value="" size="40" /></h4><br/> 

<h4>Result 3:<br /> 
<input type="text" id="result3" value="" size="40" /></h4><br/>

<h4>Result 4:<br /> 
<input type="text" id="result4" value="" size="40" /></h4><br/>
</form> </table>    </div>
                   
                    </div>                
                </div>                
            </div>
        </div>        
       
</body>
</html>

最佳答案

要更改图像，请在 JS 中执行此操作:

function calcform() 
{ 
with (document.form1) 

{ result1.value = +number1.value * .75 * 50}
{ result2.value = +number2.value * 1}
{ result3.value = +number3.value * 1}
{ result4.value = +number2.value * +number1.value}
if(result1.value > 0)
    document.getElementById("myImage").src = "image_name1";
if(result2.value == 1)
    document.getElementById("myImage").src = "image_name2";
}

注意:此“if() 语句应包含您要对每张图片更改的条件。”此外，将“image_name1”和“image_name2”更改为每个条件所需的其他图像的位置。您还可以包含更多条件。

注2:with 语句在 JS 中没问题。它表示对于以下每个 block {}，您将使用前缀“document.form1.”，即:

document.form1.result1.value =  ...
document.form1.result2.value = ...
document.form1.result3.value = ...
document.form1.result4.value = ...

将此 id 放入您的标签 img 中:

<img id="myImage" src="car1.png">

关于javascript - 如何根据下拉选择值使用 Javascript 更改图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26487910/

25 4 0
文章推荐： javascript - 响应式设计中的背景图像
文章推荐： html - Drupal 7 - 使嵌入式 iFrame 全宽
文章推荐： html - 是否可以在菜单的两侧设置 ASP 菜单项？
文章推荐： ios - 通过 UIButton 从 Appdelegate 导航到另一个 View
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com