使用javascript按照計算值顯示「星級」的評分

我有返回數字數組的函數。接下來，我必須在相關結果ID中顯示相同數量的星星。作爲JavaScript中的一個完整的noob（仍在努力驗證：P），我嘗試了很多東西，但無濟於事。希望的代碼片段（當前狀態）下面將清楚我的問題 -使用javascript按照計算值顯示「星級」的評分

function display(name1, number1, sign1, name2, number2, sign2, check, y_nat, o_nat) { 
    document.getElementById("yname").innerHTML = name1 ; 
    document.getElementById("ynumber").innerHTML = number1 ; 
    document.getElementById("ysign").innerHTML = sign1 ; 
    document.getElementById("oname").innerHTML = name2 ; 
    document.getElementById("onumber").innerHTML = number2 ; 
    document.getElementById("osign").innerHTML = sign2 ; 
    document.getElementById('result').innerHTML = check + '%'; 
/* I am trying to display y_nat[0] Stars in the result id - yr by calling a show_image(id, number) function! */ 
    x = "yr"; 
    document.getElementById("yr").innerHTML = show_image(x ,y_nat[0]) ; 
    x = "yl"; 
    document.getElementById("yl").innerHTML = y_nat[1] ; 
    x = "yf"; 
    document.getElementById("yf").innerHTML = y_nat[2] ; 
    x = "yp"; 
    document.getElementById("yp").innerHTML = y_nat[3] ; 
    x = "ys"; 
    document.getElementById("ys").innerHTML = y_nat[4] ; 
    x = "yi"; 
    document.getElementById("yi").innerHTML = y_nat[5] ; 
    x = "or"; 
    document.getElementById("or").innerHTML = o_nat[0] ; 
    x = "ol"; 
    document.getElementById("ol").innerHTML = o_nat[1] ; 
    x = "of"; 
    document.getElementById("of").innerHTML = o_nat[2] ; 
    x = "op"; 
    document.getElementById("op").innerHTML = o_nat[3] ; 
    x = "os"; 
    document.getElementById("os").innerHTML = o_nat[4] ; 
    x = "oi"; 
    document.getElementById("oi").innerHTML = o_nat[5] ; 
} 

function show_image (id,number) { 
     var img = document.createElement("img"); 
     img.src = "stars2.png"; 
     x = number; 
    y = id; 
     for (i =0; i<x; i++){ 
     document.getElementById(y).appendChild(img); 
    } 
}//or something of this sort

請讓我知道，如果這個問題還不清楚。我仍然試圖解決這個問題，並且真的有人可以在這方面指導。我正在嘗試學習JavaScript。我正嘗試使用以下鏈接中的代碼。 http://www.codingforums.com/archive/index.php/t-94715.html

在此先感謝。

來源

2012-06-09 Some_other_guy

當你執行腳本時會發生什麼？你確定y_nat [0]返回一個有效的數字嗎？你如何稱呼你的「顯示」功能？你確定它甚至被執行？你確定「stars2.png」與你的html文件在同一個文件夾中嗎？（只是對可能出錯的一些想法）。請給一些更多的細節。 – Preli

@Preli：Yup y_nat [0]返回一個我能夠顯示的有效數字。這段代碼沒有運行，但是如果我使用document.getElementById（「yl」）。innerHTML = y_nat [1];等等。它會在ID中顯示數字。 stars2.png在同一個文件夾中。 Display函數正在從表單提交調用的compute（）函數中調用。希望這些信息有幫助。 –

1日的問題，我看到的是，你需要有以下兩行循環

var img = document.createElement("img"); 
    img.src = "stars2.png";

這樣的：

for (var i =0; i<x; i++){ 
    var img = document.createElement("img"); 
    img.src = "stars2.png"; 
    document.getElementById(y).appendChild(img); 
}

第二個問題：show_image不返回任何東西（除undefined），但是您可以使用它來設置剛添加圖像的元素的html內容：

document.getElementById("yr").innerHTML = show_image(x ,y_nat[0]) ;

將此行更改爲：

show_image(x ,y_nat[0]) ;

這可能是因爲有更多的東西錯了，但是這就是我注意到了。我爲你做了一個適用於你的小例子（在IE和Chrome中測試過）：

<html> 

<head> 
<script type="text/javascript"> 

function display() { 
    var x = "yr"; 
    show_image(x ,3) ; 
} 

function show_image (id,number) { 
    var x = number; 
    var y = id; 
    for (var i =0; i<x; i++){ 
     var img = document.createElement("img"); 
     img.src = "stars2.png"; 
     document.getElementById(y).appendChild(img); 
    } 
} 


</script> 

</head> 


<body onload="display();"> 

<div id="yr"></div> 

</body> 


</html>

來源

2012-06-09 22:14:56 Preli

非常感謝！它爲我做了詭計。 :) –

使用javascript按照計算值顯示「星級」的評分

回答

相關問題