HTML5 Все исчезает после нажатия кнопки

Я новичок в html5. Я не уверен, что произошло здесь, я пытаюсь сделать так, чтобы всякий раз, когда нажимается кнопка, на холсте появляется квадратичная функция. Но в том, что я написал, всякий раз, когда я нажимаю кнопку, все исчезает сразу после фактического построения запрошенной кривой. Вот код 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

Кажется, пытается отправить форму. Быстро и легко исправить, чтобы изменить OnClick следующим образом:

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

и добавить

return false;

до конца функции dibujarCurva().

Это полезно, если вы хотите условно представить. Однако, как указано в slicedtoad и acontell, следующее решение также будет разрешено без каких-либо изменений функции.

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

источник

2015-01-21 18:29:59 Mic

Или добавить = «кнопка» '' типа для кнопочного элемента. – slicedtoad

Также еще один полностью действующий вариант. Редактирование его для полноты. – Mic

Вы можете добавить атрибут типа кнопки и не допустить его отправки формы:

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

источник

2015-01-21 18:34:27 acontell

HTML5 Все исчезает после нажатия кнопки

ответ

Смежные вопросы