Javascript 带验证的垂直条形图_Javascript_Html_Validation_Charts

Javascript 带验证的垂直条形图

javascript html validation charts

Javascript 带验证的垂直条形图,javascript,html,validation,charts,Javascript,Html,Validation,Charts,我对代码做了一些修改，因为我想在代码中进行一些验证。以前，条形图上有“%”并且在条形图下键入了名称，现在如果我键入2个参与者，它将创建4个条形图，而不是2个。在名称应为“未定义”的位置，以及%应为NaN%的位置。有人知道错误在哪里吗 <head> <title>examAnalysis</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /&

我对代码做了一些修改，因为我想在代码中进行一些验证。以前，条形图上有“%”并且在条形图下键入了名称，现在如果我键入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>


脱氮分析
div{
浮动：左侧；边距右侧：10px；
}
divp{
文本对齐：居中；
}
var参与者=[]；
var maxPoints=200；
var-barWidth=50；
函数gatherData（）{
变量名；
var点；
while（name=window.prompt（'请输入参与者名称：'））{
name=name.replace（/\s+/g'，）
如果（/[^A-Z\s\-\']/gi.test（name））| |（name=''）{
警报（'您必须输入有效的名称！'）；
}否则{
push（{name:name}）；
while（points=window.prompt（'请输入参与者的得分：'））{
点=parseInt（点，10）；
如果（/[^0-9\s\-\']/gi.test（points））| |（points=''）{
警报（'您必须输入有效数字！'）；
}否则{
push（{points:points}）；
打破
}
}  
}
}
createChart（）；
};
函数createChart（）
{
var i=0；
var len=参与者长度；
var-bar=null；
var container=document.getElementById（'chart'）；
container.innerHTML=''；
而（我'，百分比，'
'，参与者[i].name''].join（''；
容器。子容器（条形）；
i=i+1；
}
};
函数getRandomColor（）{
返回['rgb（'，Math.floor（Math.random（）*255），'，'，Math.floor（Math.random（）*255），'，'，Math.floor（Math.random（）*255），'）].join（''）；
};
添加参与者
图表

试试这个：

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();
};