I changed my code abit, because i want some validation inside my code. before the the bars had the "%" on it and the name typed in under the bar, now if i type in 2 participants, it creates 4 bars instead of 2. At the place where the names should be is an "undefined" and where the % should be is NaN%. Does someone know where the mistake is?
<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>
Try this:
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();
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다