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

我正在写一个网页，当时我将摄氏温度转换为华氏温度，反之亦然。虽然这样做，如果温度在一定程度上，我需要显示一张图片，如果它在一个不同的范围内，我需要显示另一张图片（和更多的时间）。我在正确的时间显示了正确的图片，但我似乎无法弄清楚如何让图片切换，而是只是不断加起来。基于文本输入动态改变图片

<!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>

来源

2015-03-02 TandyRayes

只是改变了图像标签的'src'属性。 'appendChild'不适合你。 – 2015-03-02 05:45:43

@TandyRayes - 对于Ashad所说的，你可能只需要在html中放入一个img元素并给它一个id，以便以后用getElementById轻松找到它。 – enhzflep 2015-03-02 05:50:17

您可以创建一个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

来源

2015-03-02 05:55:59

得到一个错误，无法读取第6行的null属性“appendChild”。在这里appendchild正确的语法？ – TandyRayes 2015-03-02 07:32:54

通过检查发现，在小提琴中找不到这样的错误。你在哪里得到错误？ – 2015-03-02 07:57:18

@TandyRayes，你也可以用另一种解决方案。在你的标记中保留一个'img'元素并隐藏它。然后点击转换的点击事件时，可以看到图像。尝试更新的答案。 – 2015-03-02 08:02:06

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

回答

相关问题