jQuery/javaScript를 사용하여 값을 어떻게 전달합니까?

Question

JS 함수를 사용하여 생성하는 파이 차트 (Canvas 2D)가있는 페이지가 있습니다. 기능을 사용하면 HTML에서 일부 값을 입력하여 파이 차트를 그릴 수 있습니다. 그것은 단순히 코드에서 이렇게 보입니다

  <script id="chart">
     piechart("piechart1", ["cyan", "yellow", "green"], [ 75, 75, 75]);
  </script>

즉, 차트의 고정 색상/각도를 입력 할 수 있습니다. 내가하려고하는 것은 몇 가지 텍스트 입력 영역을 만들려고 노력하는 것입니다. 숫자를 입력 할 수 있고 스크립트가 입력중인 숫자로 자동 변경되거나 제출 버튼을 사용하는 것입니다.

이것이 제가 지금 가지고있는 전부입니다. 누군가 누군가 나에게 손을 줄 수 있습니까?

<canvas id="piechart1"></canvas>

  <script id="chart">
     piechart("piechart1", ["cyan", "yellow", "green"], [ 75, 75, 75]);
  </script>

      <form action="" method="post">

        <label>Angle 1</label>
        <label>Angle 2</label>
        <label>Angle 3</label>
        <br>
        <input name="" id="angle1" value="" type="number">
        <input name="" id="angle2" value="" type="number">
        <input name="" id="angle3" value="" type="number">

        <input type="submit" id="submitBtn" value="submit">
      </form>

첫 번째 텍스트 영역에 100을 입력하고 제출을 클릭 한 다음 내

piechart("..........[ 75, 75, 75]); 변경 될 것입니다

piechart("..........[ 100, 75, 75]);또는

piechart("..........[ 100, 0, 0]);두 번째와 세 번째 텍스트 영역에 아무것도 입력하지 않았기 때문에

미리 감사드립니다.

Answer 1

이것은 실제로 값을 통과하는 것이 아닙니다. 버튼을 누를 때 기능을 호출합니다.

$(document).ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault(); // we don't want to submit the form

        $('#piechart').each(function() { // only do this if the element is found
            // clear the canvas
            this.getContext('2d').clearRect(0, 0, this.width, this.height);
        });

        var angles = [
            $('#angle1').val() || 0,
            $('#angle2').val() || 0,
            $('#angle3').val() || 0
        ];

        piechart("piechart1", ["cyan", "yellow", "green"], angles);
    });
});

val() 값을 얻습니다 input 요소. 우리는하다 || 0 그것을 설정합니다 0 브라우저가 이해하지 못하는 경우를 대비하여 type="number" 그리고 우리에게 빈 줄을 보냅니다.

Answer 2

이것을 시도하고 필요에 따라 코드를 변경하십시오

<canvas id="piechart1"></canvas>
<script type="text/javascript" >
$(function() {
$("#submitBtn").click(function() 
    {   
    var input1 = $("#angle1").val();
    if($("#angle1").val()=='') input1="";

    var input2 = $("#angle2").val();
    if($("#angle2").val()=='') input2="";

    var input3 = $("#angle3").val();
    if($("#angle3").val()=='') input3="";

    piechart("piechart1", ["cyan", "yellow", "green"], [input1, input2, input3]);

    });
});
</script>

      <form action="" method="post">

        <label>Angle 1</label>
        <label>Angle 2</label>
        <label>Angle 3</label>
        <br>
        <input name="" id="angle1" value="" type="number">
        <input name="" id="angle2" value="" type="number">
        <input name="" id="angle3" value="" type="number">

        <input type="submit" id="submitBtn" value="submit">
      </form>

Answer 3

나는 이런 식으로 할 것이다 :

$('form').on('submit', function (e) {
    e.preventDefault();
    var angles = $('input[id^="angle"]').map(function () {
        return (this.value !== "") ? this.value : 0;
    }).get();
    console.log(angles);
    piechart("piechart1", ["cyan", "yellow", "green"], angles);
});

여기에 바이올린으로 시험해보십시오