HTML5 버튼을 클릭하면 모든 것이 사라집니다.

저는 html5를 처음 사용합니다. 여기서 무슨 일이 일어 났는지 확신 할 수 없습니다. 버튼을 클릭 할 때마다 캔버스에 2 차 함수가 나타납니다. 그러나 내가 쓴 것에서, 버튼을 클릭 할 때마다 요청 된 커브를 실제로 플롯 한 후에 모든 것이 사라집니다. 여기 jsfiddle HTML5 버튼을 클릭하면 모든 것이 사라집니다.

<!DOCTYPE html> 

<body> 
<form action=""> 
a: <input type="text" name="tbax2" id="itbax2" value=0.01 size="4"> 
b: <input type="text" name="tbbx" id="itbbx" value=1 size="4"> 
c: <input type="text" name="tbc" id="itbc" value=40 size="4"> 
<button onclick="dibujarCurva()">Graficar</button> 

</form> 

<canvas id="myCanvas" width="500" height="300" 
style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
function dibujarCurva(){ 
var ax2 = parseFloat(document.getElementById('itbax2').value); 
var bx = parseFloat(document.getElementById('itbbx').value); 
var c = parseFloat(document.getElementById('itbc').value); 
ctx.beginPath(); 
ctx.strokeStyle = '#FF0000' 
x=0 
ctx.moveTo(0,150-(ax2*(x-250)*(x-250) + bx*(x-250) + c)); 
while (x<501){ 
    ctx.lineTo(x,150-(ax2*(x-250)*(x-250) + bx*(x-250) + c)); 
    x=x+10 
    ctx.stroke();} 
    ctx.closePath(); 
} 
function dibujarGrid(){ 
ctx.beginPath(); 
ctx.strokeStyle = '#F2F2F2' 
ctx.moveTo(0,0); 
x=0 
while (x<501){ 
    ctx.moveTo(x,0); 
    ctx.lineTo(x,300); 
    x=x+10 
    ctx.stroke();} 
x=0 
while (x<301){ 
    ctx.moveTo(0,x); 
    ctx.lineTo(500,x); 
    x=x+10 
    ctx.stroke();} 
ctx.closePath(); 
ctx.beginPath(); 
ctx.strokeStyle = '#000000' 
ctx.moveTo(250,0); 
ctx.lineTo(250,300); 
ctx.stroke(); 
ctx.moveTo(0,150); 
ctx.lineTo(500,150); 
ctx.stroke(); 
} 
dibujarGrid() 
ctx.fillText(("ax^2 + bx + c"),10,20); 
</script> 

</body>

출처

2015-01-21 Jumping cat

양식을 제출하려고 할 것 같습니다 코드입니다.

<button onclick="return dibujarCurva()">Graficar</button>

을하고 dibujarCurva() 함수의 마지막에

return false;

을 추가 빠르고 쉬운 수정은 다음과 같이 온 클릭을 변경하는 것입니다.

조건부로 제출하려는 경우 유용합니다. 그러나 slicedtoad와 acontell이 지적했듯이 다음은 함수를 수정하지 않고도이를 해결할 것입니다.

<button type="button" onclick="dibujarCurva()">Graficar</button>

출처

2015-01-21 18:29:59 Mic

을 또는 버튼 요소에'유형 = "버튼"을'추가합니다. – slicedtoad

또 다른 완전히 유효한 옵션입니다. 완성을 위해 그것을 편집하십시오. – Mic

당신은 버튼의 type 속성을 추가하고 양식을 보내는 것을 방지 할 수 있습니다

<button type="button" onclick="dibujarCurva()">Graficar</button>

출처

2015-01-21 18:34:27 acontell

HTML5 버튼을 클릭하면 모든 것이 사라집니다.

답변

관련 문제