Databases
StackOverflow2013
Postsdbo
POCan't create href link in innerHTML statement
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't create href link in innerHTML statement
    text
    copied!<p>I have a function with a stream of if statements. If a statement is true, it writes back to the document using innerHTML. Within the innerHTML I can add p tags and text, but as soon as I add an <code>&lt;a href&gt;</code> line it give me an "Uncaught SyntaxError: Unexpected identifier" error. What am I doing wrong? The error is within the <code>calage()</code> function with the following snippet:</p> <pre><code>if((calyear == 2010 &amp;&amp; calmon &gt; 10) || (calyear == 2011 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 2YO"); document.getElementById("demo").innerHTML="&lt;p&gt;Your student would more than likely enter the 2YO class. The 2YO students will have class at the Nanshan campus. To apply, please fill out the following application.&lt;/p&gt; &lt;a href="http://qsishekou.org" target="_blank"&gt;QSI Shekou!&lt;/a&gt;"; } </code></pre> <p>The full HTML file is below. Thank you for your help!</p> <pre><code> &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;table cellpadding=0 cellspacing=0 style="width:95%;" align="center"&gt; &lt;tr&gt;&lt;td align="center" class="abouttabletext"&gt;&lt;br&gt; &lt;script type="text/javascript"&gt; var startyear = "1995"; var endyear = "2013"; var dat = new Date(); var curday = dat.getDate(); var curmon = dat.getMonth()+1; var curyear = dat.getFullYear(); function checkleapyear(datea) { if(datea.getYear()%4 == 0) { if(datea.getYear()% 10 != 0) { return true; } else { if(datea.getYear()% 400 == 0) return true; else return false; } } return false; } function DaysInMonth(Y, M) { with (new Date(Y, M, 1, 12)) { setDate(0); return getDate(); } } function datediff(date1, date2) { var y1 = date1.getFullYear(), m1 = date1.getMonth(), d1 = date1.getDate(), y2 = date2.getFullYear(), m2 = date2.getMonth(), d2 = date2.getDate(); if (d1 &lt; d2) { m1--; d1 += DaysInMonth(y2, m2); } if (m1 &lt; m2) { y1--; m1 += 12; } return [y1 - y2, m1 - m2, d1 - d2]; } function calage() { var calday = document.birthday.day.options[document.birthday.day.selectedIndex].value; var calmon = document.birthday.month.options[document.birthday.month.selectedIndex].value; var calyear = document.birthday.year.options[document.birthday.year.selectedIndex].value; if(curday =="" || curmon=="" || curyear=="" || calday=="" || calmon=="" || calyear=="") { alert("please fill all the values and click go -"); } else { var curd = new Date(curyear,curmon-1,curday); var cald = new Date(calyear,calmon-1,calday); var diff = Date.UTC(curyear,curmon,curday,0,0,0) - Date.UTC(calyear,calmon,calday,0,0,0); var dife = datediff(curd,cald); var monleft = (dife[0]*12)+dife[1]; var secleft = diff/1000/60; var hrsleft = secleft/60; var daysleft = hrsleft/24; var as = parseInt(calyear)+dife[0]+1; var datee = diff/1000/60/60/24; } if((calyear == 2010 &amp;&amp; calmon &gt; 10) || (calyear == 2011 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 2YO"); document.getElementById("demo").innerHTML="&lt;p&gt;Your student would more than likely enter the 2YO class. The 2YO students will have class at the Nanshan campus. To apply, please fill out the following application.&lt;/p&gt; &lt;a href="http://www.w3schools.com/" target="_blank"&gt;Visit W3Schools!&lt;/a&gt;"; } if((calyear == 2009 &amp;&amp; calmon &gt; 10) || (calyear == 2010 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 3YO"); return 3; } if((calyear == 2008 &amp;&amp; calmon &gt; 10) || (calyear == 2009 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 4YO"); } if((calyear == 2007 &amp;&amp; calmon &gt; 10) || (calyear == 2008 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 5YO"); } if((calyear == 2006 &amp;&amp; calmon &gt; 10) || (calyear == 2007 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 6YO"); } if((calyear == 2005 &amp;&amp; calmon &gt; 10) || (calyear == 2006 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 7YO"); } if((calyear == 2004 &amp;&amp; calmon &gt; 10) || (calyear == 2005 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 8YO"); } if((calyear == 2003 &amp;&amp; calmon &gt; 10) || (calyear == 2004 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 9YO"); } if((calyear == 2002 &amp;&amp; calmon &gt; 10) || (calyear == 2003 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 10YO"); } if((calyear == 2001 &amp;&amp; calmon &gt; 10) || (calyear == 2002 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 11YO"); } if((calyear == 2000 &amp;&amp; calmon &gt; 10) || (calyear == 2001 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 12YO"); } if((calyear == 1999 &amp;&amp; calmon &gt; 10) || (calyear == 2000 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 13YO"); } if((calyear == 1998 &amp;&amp; calmon &gt; 10) || (calyear == 1999 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 14YO"); } if((calyear == 1997 &amp;&amp; calmon &gt; 10) || (calyear == 1998 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 15YO"); } if((calyear == 1996 &amp;&amp; calmon &gt; 10) || (calyear == 1997 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 16YO"); } if((calyear == 1995 &amp;&amp; calmon &gt; 10) || (calyear == 1996 &amp;&amp; calmon &lt; 11)) { console.log("They should be in the 17YO"); } if(calyear == 1995 &amp;&amp; calmon &lt; 11) { console.log("Your child is too old to attend QSI"); } } &lt;/script&gt; &lt;form name="birthday" action=""&gt; Date&lt;select name="day" size="1"&gt; &lt;script type="text/javascript"&gt; for(var j=1;j&lt;32;j++) document.write("&lt;option value="+j+"&gt;"+j+"&lt;/option&gt;"); &lt;/script&gt;&lt;/select&gt;&amp;nbsp; Month&lt;select name="month" size="1"&gt; &lt;script type="text/javascript"&gt; for(var i=1;i&lt;13;i++) document.write("&lt;option value="+i+"&gt;"+i+"&lt;/option&gt;"); &lt;/script&gt;&lt;/select&gt;&amp;nbsp; Year &lt;select name="year" size="1"&gt; &lt;script type="text/javascript"&gt; for(var k=startyear;k&lt;endyear;k++) document.write("&lt;option value="+k+"&gt;"+k+"&lt;/option&gt;"); &lt;/script&gt;&lt;/select&gt; &lt;br&gt;&lt;br&gt; &lt;input name="start" onclick="calage()" value="Calculate" type="button"&gt; &lt;/form&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;div id="demo"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload