Wie bestehe ich Werte mit JQuery/JavaScript?

Question

Ich habe eine Seite mit einem Kreisdiagramm (Canvas 2D), auf dem die JS -Funktion erstellt wird. Mit der Funktion kann ich dann in HTML einige Werte eingeben, um das Kreisdiagramm zu zeichnen. Es sieht einfach in Codes so aus

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

Das heißt, ich kann feste Farben/Winkel für mein Diagramm eingeben. Ich versuche zu versuchen, ein paar Texteingabebereiche zu erstellen, damit ich Nummern eingeben kann und entweder das Skript automatisch auf die Anzahl der Eingaben oder die Verwendung einer Sendestaste ändern kann.

Das ist alles, was ich im Moment habe. Kann mir jemand mit diesem eine Hand geben?

<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>

Nehmen wir also an, wenn ich 100 in den ersten Textbereich eingeben und klicken

piechart("..........[ 75, 75, 75]); würde sich ändern

piechart("..........[ 100, 75, 75]);oder

piechart("..........[ 100, 0, 0]);Da ich nichts in den 2. und 3. Textbereich eingegeben habe

Danke im Voraus.

Answer 1

Das gibt Werte nicht wirklich. Wenn Sie eine Taste drücken, werden nur eine Funktion aufgerufen:

$(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() erhält den Wert der input Element. Wir tun es || 0 auf einstellen auf 0 Nur für den Fall, dass der Browser nicht versteht type="number" und sendet uns eine leere Zeichenfolge.

Answer 2

Versuchen Sie dies, ändern Sie den Code nach Bedarf

<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

Ich würde es so machen:

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

Versuch in Geige hier