我稍微更改了我的代码，因为我想在我的代码中进行一些验证。在条形图上有“%”并在条形图下方输入名称之前，现在如果我输入 2 个参与者，它会创建 4 个条形图而不是 2 个。在名称应该是“未定义”的地方并且其中 % 应该是 NaN%。有人知道错误在哪里吗？
<head>
<title>examAnalysis</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
float: left; margin-right: 10px;
}
div p {
text-align: center;
}
</style>
<script type="text/javascript">
var participant = [];
var maxPoints = 200;
var barWidth = 50;
function gatherData() {
var name;
var points;
while (name = window.prompt('Please enter the name of the participant:')) {
name = name.replace(/\s+/g, '')
if ((/[^A-Z\s\-\']/gi.test(name)) || (name == '')) {
alert ('You must enter a valid name! ');
} else {
participant.push({name: name});
while(points = window.prompt('Please enter the achieved points of the participant:')) {
points = parseInt(points, 10);
if ((/[^0-9\s\-\']/gi.test(points)) || (points == '')) {
alert ('You must enter a valid number! ');
} else {
participant.push({points: points});
break;
}
}
}
}
createChart();
};
function createChart ()
{
var i = 0;
var len = participant.length;
var bar = null;
var container = document.getElementById('chart');
container.innerHTML='';
while (i < len)
{
bar = document.createElement('div');
bar.style.width = barWidth + 'px';
bar.style.backgroundColor = getRandomColor();
bar.style.float = 'left';
bar.style.marginRight = '10px';
bar.style.height = ((participant[i].points / maxPoints) * 200) + 'px';
bar.style.marginTop = 200 - parseInt(bar.style.height) + 'px';
percent = ((participant[i].points / maxPoints) * 100) + '%';
bar.innerHTML = ['<p style="margin-top: ' + (parseInt(bar.style.height) - 17) + 'px">', percent, '<br />', participant[i].name, '</p>'].join('');
container.appendChild(bar);
i = i + 1;
}
};
function getRandomColor () {
return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join('');
};
</script>
</head>
<body>
<button onclick="gatherData()">Add Participant</button>
<h4>Chart</h4>
<div id="chart"></div>
</body>
最佳答案
试试这个:
function gatherData()
{
var name = window.prompt('Please enter the name of the participant:');
name = name.replace(/\s+/g, '');
if ((/[^A-Z\s\-\']/gi.test(name)) || (name == '') || (name == 'undefined'))
{
alert ('You must enter a valid name! ');
return;
}
var points = window.prompt('Please enter the achieved points of the participant:');
points = parseInt(points, 10);
if ((/[^0-9\s\-\']/gi.test(points)) || (points == ''))
{
alert ('You must enter a valid number! ');
return;
}
participant.push({name: name, points: points});
createChart();
};
关于javascript - 带验证的垂直条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30710294/