基于文本输入动态更改图片

Dynamically changing pictures based on text input

本文关键字：动态 输入 于文本 文本      更新时间：2023-09-26

我正在写一个网页，将温度从摄氏度转换为华氏度，反之亦然。在这样做的时候，如果温度在一定程度上，我需要显示一张图片，如果温度处于不同的范围，我需要再显示另一张图片（再显示一次）。我在正确的时间显示了正确的图片，但我似乎不知道如何切换图片，相反，它们只是不断地相加。

<!DOCTYPE html>
<html>
<head>
<script>
function convertTemp(fAfter) 
{
 var c = document.getElementById('c'), f = document.getElementById('f');
 var fAfter;
 var cAfter
 if(c.value != '') 
 {
  f.value = (c.value * 9 / 5 + 32);
  fAfter = (c.value * 9 / 5 + 32);
  c.value = c.value;
  return fAfter;
 }
 else  
 {
    c.value = ((f.value - 32) * 5 / 9);
    f.value = f.value;
    fAfter = f.value;
    return fAfter;
 }

}
function changePicture()
{
    var A = convertTemp();
    if (A > 50)
        {
            var img = document.createElement('img');
            img.src = "warm.gif";
            document.body.appendChild(img);
        }
        else if (A < 50 & A > 32)
        {
            var img = document.createElement('img');
            img.src = "cool.gif";
            document.body.appendChild(img);         
        }
            else
            {
                var img = document.createElement('img');
                img.src = "cold.gif";
                document.body.appendChild(img);     
            }
}
function clearBoth()
{
 var c = document.getElementById('c');
 c.value = '';
    var f =document.getElementById('f');
    f.value= '';
}

var button = document.getElementById("convert");
</script>
</head>
<body>
<input placeholder = "Celsius" id="c" onclick='clearBoth()' >&#176C</br>
<input placeholder = "Fahrenheit" id="f" onclick='clearBoth()' >&#176F</br>
<button type="button" id="convert" onclick="convertTemp() & changePicture()">Convert</button>
</body>
<p>
</p>
</html>

您可以创建全局作用域上可用的img，并根据输入值更改其src属性。最初，您可以隐藏图像。

HTML: 

<body>
    <input placeholder = "Celsius" id="c" onclick='clearBoth()' >&#176C</br>
    <input placeholder = "Fahrenheit" id="f" onclick='clearBoth()' >&#176F</br>
    <img src="" id="tempImage"/>
    <button type="button" id="convert">Convert</button>
</body>

javaScript:

var img = document.getElementById("tempImage");
img.style.display = 'none';
function convertTemp(fAfter) 
{
 var c = document.getElementById('c'), f = document.getElementById('f');
 var fAfter;
 var cAfter
 if(c.value != '') 
 {
  f.value = (c.value * 9 / 5 + 32);
  fAfter = (c.value * 9 / 5 + 32);
  c.value = c.value;
  return fAfter;
 }
 else  
 {
    c.value = ((f.value - 32) * 5 / 9);
    f.value = f.value;
    fAfter = f.value;
    return fAfter;
 }

}
function changePicture()
{
    var A = convertTemp();
    img.style.display = '';    
    if (A > 50)
        {
            img.src = "http://3.bp.blogspot.com/-I5le-iONsuc/UDwY0gx6LMI/AAAAAAAAAnk/2VVq3KX7e2I/s1600/600px-Capital_C.png";
        }
        else if (A < 50 & A > 32)
        {
            img.src = "http://static.tumblr.com/148af423ee41cdb24507f372f95bd4d0/wuvn5qh/ovFmzk9sh/tumblr_static_f-word-1ha91xq.png";       
        }
            else
            {
                img.src = "http://static.tumblr.com/148af423ee41cdb24507f372f95bd4d0/wuvn5qh/ovFmzk9sh/tumblr_static_f-word-1ha91xq.png";    
            }
}
function clearBoth()
{
 var c = document.getElementById('c');
 c.value = '';
    var f =document.getElementById('f');
    f.value= '';
}

var button = document.getElementById("convert");
button.onclick = changePicture;

jsFiddle

相关文章：