вертикальная гистограмма с пользовательским вводом и подтверждением

Мне нужно сделать код, в котором пользователь может добавить максимальные точки, достигнутые точки и его имя. это мой код ... все вещи уже работают, мне просто нужна функция для изменения максимальных точек, сейчас это статическое число.вертикальная гистограмма с пользовательским вводом и подтверждением

<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 = 100; 
var barWidth = 75; 

window.onload = function() { document.getElementsByTagName('input')[0].value = maxPoints; } function setMaxPoints() { maxPoints = document.getElementsByTagName('input')[0].value; }   

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

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> 
    <label><input size="5" onkeyup="setMaxPoints()" /> Set Max Points</label><br /><br /> 
    <button onclick="gatherData()">Add Participant</button> 
    <h4>Chart</h4> 
    <div id="chart"></div> 
</body>

источник

2015-06-08 kentas

Kentas, вот вся моя версия кода с добавлением ввода, чтобы получить maxPoints:

<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>examAnalysis</title> 
<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 = 20; 

window.onload = function() 
{ 
    document.getElementsByTagName('input')[0].value = maxPoints; 
} 

function setMaxPoints() 
{ 
    maxPoints = document.getElementsByTagName('input')[0].value; 
} 

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

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.marginBottom = '5px'; 
     bar.style.backgroundColor = getRandomColor(); 

     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> 
    <label><input size="5" onkeyup="setMaxPoints()" /> Set Max Points</label><br /><br /> 
    <button onclick="gatherData()">Add Participant</button> 
    <h4>Chart</h4> 
    <div id="chart"></div> 
</body>

источник

2015-06-08 15:02:09 Lance

Разница заключается в том, что 2 функции, которые я дал вам. Они не работали, когда все были на одной линии. – Lance

да я вижу разницу сейчас – kentas

это говорит, что я должен ждать 5 минут, чтобы принять ваш ответ – kentas

вертикальная гистограмма с пользовательским вводом и подтверждением

ответ

Смежные вопросы