検証付きの垂直棒グラフ

debugcn 投稿 Dev

ケンタス

コード内で検証が必要なため、コードを少し変更しました。バーに「％」が表示され、バーの下に名前が入力される前は、2人の参加者を入力すると、2ではなく4つのバーが作成されます。名前のある場所は「未定義」であり、ここで、％は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();
};