Estoy codificando un script donde el usuario ingresa las coordenadas y el programa dibuja una línea en un lienzo, pero después de usar la función onsubmit(), no puedo hacer que la línea permanezca en el lienzo y dice 'El archivo que pediste porque no existe' cuando lo puse en W3schools uno. ¿Qué pasa con mi código?
<form onsubmit="drawLine()" autocomplete="on" style=" Starting Coordinate: <input type= "number" id="x_coor" name="x_coor" min= "-12" max="12" placeholder="x" step= "0.01"> , <input type= "number" id="y_coor" name="y_coor" min= "-15" max="15" placeholder="y"> <br> Rate of Change: <input type= "number" id="rise" name="neum_roc" placeholder="rise"> / <input type= "number" id="run" name="denom_roc" placeholder="run"> <br> <input type= "submit" name="run"> <input type= "reset" name="reset" > <hr> </form> <div style = "text-align:center;"> <canvas id="Cartesian_Graph" height="1000" width="1000", style="border: 10px solid #000000; background-image: url('https://papik.pro/en/uploads/posts/2022-06/1655841218_5-papik-pro-p-cool-drawings-on-the-coordinate-plane-5.png'); background-position: center; background-size: 1160px 1160px;"> <!--the image is added as a background to not interfere with the line that needs to be drawn on top of image--> Your browser does not support canvas. </canvas> </div> <script> var canvas = document.getElementById('Cartesian_Graph'); var ctx = canvas.getContext('2d'); ctx.beginPath(); function drawLine() { ctx.lineWidth = 5 ctx.moveTo(0,0); ctx.lineTo(1175,1175); ctx.stroke(); } </script>Cambié su código javascript para que la función drawLine() devolviera falso. Esto funcionó y evitó que la línea del lienzo desapareciera.
En su código javascript, simplemente agregué return false al final de la función:
var canvas = document.getElementById('Cartesian_Graph'); var ctx = canvas.getContext('2d'); ctx.beginPath(); function drawLine() { ctx.lineWidth = 5 ctx.moveTo(0,0); ctx.lineTo(1175,1175); ctx.stroke(); return false; }y en su elemento de formulario, cambié:
<form onsubmit="drawLine()" autocomplete="on" style="">a
<form onsubmit="return drawLine();" autocomplete="on" style="">Espero que esto ayude.