Javascript OnChange更新數據

我試圖實現的應該是相當簡單的，但我打了一堵牆。在概念中，當數值在表單中改變時，它會激活JavaScript onChange命令並立即更新雷達圖表。初始值拉入圖表中，但沒有任何更改通過。我試圖做到這一點，沒有提交按鈕。Javascript OnChange更新數據

任何想法？

<!doctype html> 
<html> 

<head> 
    <title>Radar Chart</title> 
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
    <script src="http://www.chartjs.org/dist/2.6.0/Chart.bundle.js"></script> 
    <script src="http://www.chartjs.org/samples/latest/utils.js"></script> 
    <style> 
    canvas { 
     -moz-user-select: none; 
     -webkit-user-select: none; 
     -ms-user-select: none; 
    } 
    </style> 
</head> 

<body> 
valueToSocietyScore: <input type="number" id="valueToSocietyScore" name="valueToSocietyScore" value = '10' onchange="valueToSocietyScoregetData(this)"><br> 
efficacyScore: <input type="number" id="efficacyScore" name="efficacyScore" value = '10' onchange="efficacyScoregetData(this)"><br> 
impactMagnitudeScore: <input type="number" id="impactMagnitudeScore" name="impactMagnitudeScore" value = '10' onchange="impactMagnitudeScoregetData(this)"><br> 
scalabilityScore: <input type="number" id="scalabilityScore" name="scalabilityScore" value = '10' onchange="scalabilityScoregetData(this)"><br> 
missionAlignmentScore: <input type="number" id="missionAlignmentScore" name="missionAlignmentScore" value = '10' onchange="missionAlignmentScoregetData(this)"><br> 
esgScore: <input type="number" id="esgScore" name="esgScore" value = '10' onchange="esgScoregetData(this)"><br> 

<div class="chart-container" style="position: relative; height:40vh; width:80vw"> 
    <canvas id="myChart"></canvas> 
</div> 
<script> 
function valueToSocietyScoregetData(){ 
    return document.getElementById("valueToSocietyScore").value; 
} 

function efficacyScoregetData(){ 
    return document.getElementById("efficacyScore").value; 
} 

function impactMagnitudeScoregetData(){ 
    return document.getElementById("impactMagnitudeScore").value; 
} 

function scalabilityScoregetData(){ 
    return document.getElementById("scalabilityScore").value; 
} 

function missionAlignmentScoregetData(){ 
    return document.getElementById("missionAlignmentScore").value; 
} 

function esgScoregetData(){ 
    return document.getElementById("esgScore").value; 
} 


var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'radar', 
    data: { 
     labels: ["Value to Society score", "Efficacy score", "Impact Magnitude score", "Scalability score", "Mission Alignment score", "ESG score "], 
     datasets: [{ 
      label: "My First dataset", 
      backgroundColor: 'rgba(0, 0, 255, 0.2)', 
      borderColor: 'rgb(0, 0, 255)', 
      data: [valueToSocietyScoregetData(), efficacyScoregetData(), impactMagnitudeScoregetData(), scalabilityScoregetData(), missionAlignmentScoregetData(), esgScoregetData()], 
     }] 
    }, 

    options: { 
     legend: { 
      position: 'top', 
     }, 
     title: { 
      display: true, 
      text: 'Chart.js Radar Chart' 
     }, 
     scale: { 
      ticks: { 
       fixedStepSize: 1, 
       beginAtZero: true 
      } 
     } 
    } 

}); 



</script> 
</body> 

</html>

來源

2017-06-12 b8con

我不認爲onchange適用於輸入，至少是你寫它的方式。

您可以使用jQuery的.change像這樣雖然：

$('input[name=valueToSocietyScore]').change(function() { ... });

來源

2017-06-12 23:47:02

Javascript OnChange更新數據

回答

相關問題