使用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按照计算值显示“星级”的评分

回答

相关问题