基於文本輸入動態改變圖片

我正在寫一個網頁，當時我將攝氏溫度轉換爲華氏溫度，反之亦然。雖然這樣做，如果溫度在一定程度上，我需要顯示一張圖片，如果它在一個不同的範圍內，我需要顯示另一張圖片（和更多的時間）。我在正確的時間顯示了正確的圖片，但我似乎無法弄清楚如何讓圖片切換，而是隻是不斷加起來。基於文本輸入動態改變圖片

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

基於文本輸入動態改變圖片

回答

相關問題