JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<section id="parametros">
    <form action="" method="post" name="parametro">Color:
        <input type="text" name="btncolor" id="color" value="red">
        <br/>Ancho:
        <input type="text" name="btnancho" id="ancho" value="10">
        <br/>Tipo Extremo:
        <br/>Round
        <input type="radio" name="btntipoextremo" value="round" id="tipoextremo-1" checked="checked">
        <br/>Square
        <input type="radio" name="btntipoextremo" value="square" id="tipoextremo-2">
        <br/>Butt
        <input type="radio" name="btntipoextremo" value="butt" id="tipoextremo-3">
        <br/>
        <button name="btnOK" type="button" value="OK" onclick="parametros()">OK</button>
    </form>
</section>

JavaScript

function parametros() {
    //var nombre = document.parametro.btncolor.value;
    //alert(nombre);

    contexto.beginPath();
    color = document.getElementById("color").value;
    ancho = document.getElementById("ancho").value;

    alert(color);
    alert(ancho);

    var boton_te = document.forms[0];
    var i;
    var tipoextremo;
    for (i = 0; i < boton_te.length; i++) {
        if (boton_te[i].checked) {
            tipoextremo = tipoextremo + boton_te[i].value + " ";
        }
    }

    document.getElementsByName("btntipoextremo").value = tipoextremo;
    tipoextremo = tipoextremo;
    alert(tipoextremo);

    switch (tipoextremo) {
        case 'round':
            alert("hi");
            break;
        case 'square':
            alert("hi");
            break;
        case 'butt':
            alert("hi");
            break;
        default:
            alert("hi");
            break;
    }
    $("button[type='button']").click(function () {
        switch (this.name) {
            case 'btnarco':
                fun_arco(color, ancho, tipoextremo);
                break;
            case 'btncuad':
                fun_cuad(color, ancho, tipoextremo);
                break;
            case 'btnbezier':
                fun_bezier(color, ancho, tipoextremo);
                break;
            case 'btnzigzag':
                fun_zigzag(color, ancho, tipoextremo);
                break;
            case 'btnespiral':
                fun_espiral(color, ancho, tipoextremo);
                break;
            default:
                alert("hi");
                break;
        }
    });
}