javascript - Adding text to a canvas with HTML5 when submit button is clicked -
hello writing functionality allow user add title cavnas. happens when click button text appears split second in desired position , disappears.
code:
function addtitle2(){ var title = document.getelementbyid("titlevalue").value; if(title === ""){ document.getelementbyid("error").innerhtml="nothing entered"; }else { //add text canvas: var = document.getelementbyid("thecanvas"); var context = a.getcontext("2d"); context.fillstyle = "black"; context.strokestyle = "black"; context.font = "35px arial"; context.filltext(title,900,50); context.stroke(); } } method call:
<table id="table"> <form action="index.html" id="form" method="post"> <tr> <td class="td"><input class="button" type="submit" name="save" value="save"/></td> <td class="td"><input type="text" id="titlevalue" class="field" name="title"/></td> <td class="td"><input class="button" type="submit" id ="titleadd" name="addtitle" value="add title" onclick="addtitle2();" /></td> </tr> </form> </table> also if input box left blank , submit clicked error (display outside div in p tag) appears in same brief fashion.
html in full:
<!doctype html>
<head> <link rel="stylesheet" type="text/css" href="css.css"> <title> graph</title> </head> <body onload="drawgraph()" > <div id="main"> <div id="canvascont"> <canvas id="thecanvas" width="1100" height="400"></canvas> </div> <div id="input"> <form> <select class="dropdown" id="monday" onchange="getpick(this)" name="monday"> <option value="0">0</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="20">20</option> <option value="25">25</option><option value="30">30</option><option value="35">35</option><option value="40">40</option><option value="45">45</option> <option value="50">50</option><option value="55">55</option><option value="60">60</option><option value="65">65</option><option value="70">70</option> <option value="75">75</option><option value="80">80</option><option value="85">85</option><option value="90">90</option><option value="95">95</option> <option value="100">100</option> </select> <select class="dropdown" id="tuesday" onchange="getpick(this)" name="tuesday"> <option value="0">0</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="20">20</option> <option value="25">25</option><option value="30">30</option><option value="35">35</option><option value="40">40</option><option value="45">45</option> <option value="50">50</option><option value="55">55</option><option value="60">60</option><option value="65">65</option><option value="70">70</option> <option value="75">75</option><option value="80">80</option><option value="85">85</option><option value="90">90</option><option value="95">95</option> <option value="100">100</option> </select> <select class="dropdown" id="wednesday" onchange="getpick(this)" name="wednesday"> <option value="0">0</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="20">20</option> <option value="25">25</option><option value="30">30</option><option value="35">35</option><option value="40">40</option><option value="45">45</option> <option value="50">50</option><option value="55">55</option><option value="60">60</option><option value="65">65</option><option value="70">70</option> <option value="75">75</option><option value="80">80</option><option value="85">85</option><option value="90">90</option><option value="95">95</option> <option value="100">100</option> </select> <select class="dropdown" id="thursday" onchange="getpick(this)" name="thursday"> <option value="0">0</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="20">20</option> <option value="25">25</option><option value="30">30</option><option value="35">35</option><option value="40">40</option><option value="45">45</option> <option value="50">50</option><option value="55">55</option><option value="60">60</option><option value="65">65</option><option value="70">70</option> <option value="75">75</option><option value="80">80</option><option value="85">85</option><option value="90">90</option><option value="95">95</option> <option value="100">100</option> </select> <select class="dropdown" id="friday" onchange="getpick(this)" name="friday"> <option value="0">0</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="20">20</option> <option value="25">25</option><option value="30">30</option><option value="35">35</option><option value="40">40</option><option value="45">45</option> <option value="50">50</option><option value="55">55</option><option value="60">60</option><option value="65">65</option><option value="70">70</option> <option value="75">75</option><option value="80">80</option><option value="85">85</option><option value="90">90</option><option value="95">95</option> <option value="100">100</option> </select> <select class="dropdown" id="saturday" onchange="getpick(this)" name="saturday"> <option value="0">0</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="20">20</option> <option value="25">25</option><option value="30">30</option><option value="35">35</option><option value="40">40</option><option value="45">45</option> <option value="50">50</option><option value="55">55</option><option value="60">60</option><option value="65">65</option><option value="70">70</option> <option value="75">75</option><option value="80">80</option><option value="85">85</option><option value="90">90</option><option value="95">95</option> <option value="100">100</option> </select> <select class="dropdown" id="sunday" onchange="getpick(this)" name="sunday"> <option value="0">0</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="20">20</option> <option value="25">25</option><option value="30">30</option><option value="35">35</option><option value="40">40</option><option value="45">45</option> <option value="50">50</option><option value="55">55</option><option value="60">60</option><option value="65">65</option><option value="70">70</option> <option value="75">75</option><option value="80">80</option><option value="85">85</option><option value="90">90</option><option value="95">95</option> <option value="100">100</option> </select> </form> <div id="inputcont"> <form action="index.html" id="form" method="post"> <table id="table"> <tr> <td class="td"><input class="button" type="submit" name="save" value="save"/></td> <td class="td"><input type="text" id="titlevalue" class="field" name="title"/></td> <td class="td"><input class="button" type="submit" id ="titleadd" name="addtitle" value="add title" onclick="addtitle2();" /></td> </tr> </table> </form> </div> </div><!-- end input div --> <p id="error"> </p> </div> </body>
the problem website submitting form (which reloading page). should prevent it. easiest way returning false in submit event handler. so, instead of adding event handler click submit event.
also remember put <form> outside <table> stated in comment.
html:
<form action="index.html" id="form" method="post"> <table id="table"> <tr> <td class="td"><input class="button" type="submit" name="save" value="save"/></td> <td class="td"><input type="text" id="titlevalue" class="field" name="title"/></td> <td class="td"><input class="button" type="submit" id ="titleadd" name="addtitle" value="add title" onsubmit="addtitle2();" /></td> </tr> </table> </form> javascript:
function addtitle2(){ var title = document.getelementbyid("titlevalue").value; if (title === "") { document.getelementbyid("error").innerhtml="nothing entered"; } else { //add text canvas: var = document.getelementbyid("thecanvas"); var context = a.getcontext("2d"); context.fillstyle = "black"; context.strokestyle = "black"; context.font = "35px arial"; context.filltext(title,900,50); context.stroke(); } return false; // <-- prevent form submitting }
Comments
Post a Comment