vmars316 Posted April 11, 2016 Share Posted April 11, 2016 (edited) Hello & Thanks , I am trying to show a log from js to html page . document.write(oneTraceLine + " <br>");} But with the canvas element present , I don't seem to be able to do that . The scaled down code exerpt below is an example of what I am trying to do , but actual js code is much much larger . What can I do to get this puppy working ? I am having trouble getting the <code> tags to work . So , I'll try QUOTES next : Hello & Thanks , I am trying to show a log from js to html page . document.write(oneTraceLine + " <br>");} But with the canvas element present , I don't seem to be able to do that . The scaled down code exerpt below is an example of what I am trying to do , but actual js code is much much larger . What can I do to get this puppy working ? <!DOCTYPE html><html><head></head><body><img id="scream" src="http://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p><canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script type='text/javascript'>window.onload = function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("scream"); alert("scream.width = " + scream.width + " , scream.height = " + scream.height + "\n scream.src = " + scream.src ); ctx.drawImage(img, 10, 10);traceIt();}function traceIt(){var idTag = 0; var thisIdTag = 0; var cntFor = 9; for(c=0; c<cntFor; c++) { idTag += 1; thisIdTag += 2;writeTraceLog('Here we go: idTag/thisIdTag \n' + idTag+'/'+thisIdTag + ' ::' );writeTraceLog('Here we go: idTag/thisIdTag \n' + idTag+'/'+thisIdTag + ' ::' );if(idTag == 8){alert(' idTag/thisIdTag Should be: 8/16 \n' + idTag+'/'+thisIdTag + ' ::'); }}}//function writeTraceLog(oneTraceLine){document.open();document.write(oneTraceLine + " <br>");}document.open();//</script></body></html> Edited April 11, 2016 by vmars316 Link to comment Share on other sites More sharing options...
Ingolme Posted April 11, 2016 Share Posted April 11, 2016 You should not use document.write() because when called after the initial page load it will erase everything that is currently on the page before writing its output. Link to comment Share on other sites More sharing options...
vmars316 Posted April 11, 2016 Author Share Posted April 11, 2016 (edited) You should not use document.write() because when called after the initial page load it will erase everything that is currently on the page before writing its output. Pls then , will you show me an example of what I should use ? If I remove JUST the canvas element and leave in the <p id="traceLog" > writeTraceLog <br></p> <img id="scream" src="http://www.w3schools..._the_scream.jpg" alt="The Scream" width="220" height="277"> it prints , but overlays itself . Thanks Edited April 11, 2016 by vmars316 Link to comment Share on other sites More sharing options...
Ingolme Posted April 11, 2016 Share Posted April 11, 2016 The easiest alternative is innerHTML, but there are other methods using the DOM. Link to comment Share on other sites More sharing options...
vmars316 Posted April 11, 2016 Author Share Posted April 11, 2016 The easiest alternative is innerHTML, but there are other methods using the DOM. Same deal , it overlays each line . Link to comment Share on other sites More sharing options...
Ingolme Posted April 11, 2016 Share Posted April 11, 2016 What does your code look like? Link to comment Share on other sites More sharing options...
vmars316 Posted April 11, 2016 Author Share Posted April 11, 2016 (edited) What does your code look like? <!DOCTYPE html> <html> <head> </head> <body onload="startIt()"> <img id="scream" src="http://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream" width="220" height="277"> <p id="traceMsg"></p><p>Canvas:</p> <canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script type='text/javascript'> function startIt() { var oneTraceLine ; var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("scream"); alert("scream.width = " + scream.width + " , scream.height = " + scream.height + "\n scream.src = " + scream.src ); ctx.drawImage(img, 10, 10); traceIt(); } function traceIt(){ var idTag = 0; var thisIdTag = 0; var cntFor = 9; for(c=0; c<cntFor; c++) { idTag += 1; thisIdTag += 2; writeTraceLog('Here we go: idTag/thisIdTag \n' + idTag+'/'+thisIdTag + ' ::' ); writeTraceLog('Here we go: idTag/thisIdTag \n' + idTag+'/'+thisIdTag + ' ::' ); if(idTag == 8){ continueOrCancel(); alert(' idTag/thisIdTag Should be: 8/16 \n' + idTag+'/'+thisIdTag + ' ::'); } } } // function writeTraceLog(oneTraceLine){ document.getElementById("traceMsg").innerHTML = oneTraceLine; }// // function continueOrCancel(){ var txt; var r = confirm("Press OK to contimue... Else Press Cancel ."); if (r == true) { txt = "You pressed OK!\n let's continue..."; } else { abortJS(); } } // function abortJS(){ try { adddlert("This is intentionally Bad Code , to FORCE ERROR !"); } catch(err) { document.getElementById("errMsg").innerHTML = err.message; } } // </script> </body> </html> Edited April 11, 2016 by vmars316 Link to comment Share on other sites More sharing options...
justsomeguy Posted April 11, 2016 Share Posted April 11, 2016 What do you mean it overlays, you see the text on top of some other element? Link to comment Share on other sites More sharing options...
Ingolme Posted April 11, 2016 Share Posted April 11, 2016 I don't see an element with id "traceMsg" in your code. That HTML element needs to exist on the page. You also should use += if you don't want to overwrite previous messages. document.getElementById("traceMsg").innerHTML += oneTraceLine Link to comment Share on other sites More sharing options...
vmars316 Posted April 11, 2016 Author Share Posted April 11, 2016 I don't see an element with id "traceMsg" in your code. That HTML element needs to exist on the page. You also should use += if you don't want to overwrite previous messages. document.getElementById("traceMsg").innerHTML += oneTraceLine Ah Thanks ! The += in document.getElementById("traceMsg").innerHTML += (oneTraceLine + "<br>"); is the piece I was missig . The whole code now works great and looks like : <!DOCTYPE html> <html> <head> </head> <body onload="startIt()"> <img id="scream" src="http://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream" width="220" height="277"> <p id="traceMsg"></p><p>Canvas:</p> <canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script type='text/javascript'> function startIt() { var oneTraceLine ; var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("scream"); alert("scream.width = " + scream.width + " , scream.height = " + scream.height + "\n scream.src = " + scream.src ); ctx.drawImage(img, 10, 10); traceIt(); } function traceIt(){ var idTag = 0; var thisIdTag = 0; var cntFor = 9; for(c=0; c<cntFor; c++) { idTag += 1; thisIdTag += 2; writeTraceLog('Here we go: idTag/thisIdTag \n' + idTag+'/'+thisIdTag + ' ::' ); writeTraceLog('Here we go: idTag/thisIdTag \n' + idTag+'/'+thisIdTag + ' ::' ); if(idTag == 8){ continueOrCancel(); alert(' idTag/thisIdTag Should be: 8/16 \n' + idTag+'/'+thisIdTag + ' ::'); } } } // function writeTraceLog(oneTraceLine){ document.getElementById("traceMsg").innerHTML += (oneTraceLine + "<br>"); }// // function continueOrCancel(){ var txt; var r = confirm("Press OK to contimue... Else Press Cancel ."); if (r == true) { txt = "You pressed OK!\n let's continue..."; } else { abortJS(); } } // function abortJS(){ try { adddlert("This is intentionally Bad Code , to FORCE ERROR !"); } catch(err) { document.getElementById("errMsg").innerHTML = err.message; } } // </script> </body> </html> Link to comment Share on other sites More sharing options...
vmars316 Posted April 11, 2016 Author Share Posted April 11, 2016 (edited) addendum: BTW: The abort code above sometimes doesn't work , so I wrote new code here : http://liesandcowpies.com/javascript/abortJS.html I tried to Post it here , but couldn't get <code> or quote to work . Edited April 12, 2016 by vmars316 Link to comment Share on other sites More sharing options...
Ingolme Posted April 12, 2016 Share Posted April 12, 2016 What is "abort" supposed to do exactly? Link to comment Share on other sites More sharing options...
thescientist Posted April 12, 2016 Share Posted April 12, 2016 I tried to Post it here , but couldn't get <code> or quote to work . The markup syntax is typically to surround it with brackets, eg [ code] code here [/ code] (spaces before code intentional). There is also a button for inserting it, the < > button. Link to comment Share on other sites More sharing options...
vmars316 Posted April 12, 2016 Author Share Posted April 12, 2016 (edited) thescientist ; Hello & Thanks , Learning javascript from w3schools , I often the code there as a starting point . But what happens when , I ask a question regarding code , I often paste that code into the question text . But when I use the < code> or < quote> icons , often times it deletes part of the code . For example , here is some code as regular text : // function writeTraceLog(oneTraceLine){ document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine); } // function continueOrCancel(){ var txt; var r = confirm("Press OK to continue... Else... Press Cancel to Abort javascript ."); if (r == true) { txt = "You pressed OK!\n let's continue..."; } else { } } // Here is the same code using < code> icon : Well, well , it usually just deletes a few lines here and there . Today it deleted the whole code . The problem is further troublesome , because it looks normal in the Edit and Preview window . It isn't evident til I look at what actually gets posted . Here is the same code as < quote> : // function writeTraceLog(oneTraceLine){ document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine); } // function continueOrCancel(){ var txt; var r = confirm("Press OK to continue... Else... Press Cancel to Abort javascript ."); if (r == true) { txt = "You pressed OK!\n let's continue..."; } else { } } // Hmm , its working today . Here is the same code plugging in the < code> manually : < code> // function writeTraceLog(oneTraceLine){ document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine); } // function continueOrCancel(){ var txt; var r = confirm("Press OK to continue... Else... Press Cancel to Abort javascript ."); if (r == true) { txt = "You pressed OK!\n let's continue..."; } else { } } // </ code> Hmm... The code is there , but no colored background . Anyways , just thought I would mention it . Edited April 12, 2016 by vmars316 Link to comment Share on other sites More sharing options...
justsomeguy Posted April 12, 2016 Share Posted April 12, 2016 All bbcode tags use square brackets, not angle brackets. Link to comment Share on other sites More sharing options...
vmars316 Posted April 12, 2016 Author Share Posted April 12, 2016 What is "abort" supposed to do exactly? It is supposed to Exit the script . which it does , always , all browsers . Link to comment Share on other sites More sharing options...
Ingolme Posted April 12, 2016 Share Posted April 12, 2016 Forcing an error is not a really good way to program. You could wrap the whole thing in a function and call return instead. It's more efficient and won't interfere with other unrelated scripts that may be running. function myProgram() { // All code in here if(wantToLeave) { return; } } Link to comment Share on other sites More sharing options...
thescientist Posted April 12, 2016 Share Posted April 12, 2016 I usually don't even bother with the button. It's just easier to set the bbcode tags myself, eg. [ code] function showCodeSnippet() { //my code will go here } [/ code] (again don't include the space before code) Link to comment Share on other sites More sharing options...
vmars316 Posted April 13, 2016 Author Share Posted April 13, 2016 I usually don't even bother with the button. It's just easier to set the bbcode tags myself, eg. [ code] function showCodeSnippet() { //my code will go here } [/ code] (again don't include the space before code) Oh , I interpreted "(spaces before code intentional)." to mean this is how to do it . Thanks Link to comment Share on other sites More sharing options...
vmars316 Posted April 13, 2016 Author Share Posted April 13, 2016 Forcing an error is not a really good way to program. You could wrap the whole thing in a function and call return instead. It's more efficient and won't interfere with other unrelated scripts that may be running. function myProgram() { // All code in here if(wantToLeave) { return; } } Hey , that's much better . Thanks Link to comment Share on other sites More sharing options...
vmars316 Posted April 13, 2016 Author Share Posted April 13, 2016 Forcing an error is not a really good way to program. You could wrap the whole thing in a function and call return instead. It's more efficient and won't interfere with other unrelated scripts that may be running. function myProgram() { // All code in here if(wantToLeave) { return; } } Oops , its not working for me . Pls , what am I doing wrong ? <code> function continueOrCancel(){ var x; var r = confirm(" function continueOrCancel() \nPress OK to continue...\nElse\nPress Cancel to Abort javascript ."); if (r == true) { alert("You pressed OK! Let's Continue..."); } else { if(true){alert(" function continueOrCancel()\nInside ELSE , r= " + r); return; } } } <code> Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted April 13, 2016 Share Posted April 13, 2016 You have to call return in the function that you want to end, not in a sub function. This should work: function continueOrCancel(){ return confirm("Press OK to contimue... Else Press Cancel ."); } In the original function: if(idTag == 8){ if(continueOrCancel()) { // Continue alert(' idTag/thisIdTag Should be: 8/16 \n' + idTag+'/'+thisIdTag + ' ::'); } else { // Cancel return; } } Link to comment Share on other sites More sharing options...
dsonesuk Posted April 13, 2016 Share Posted April 13, 2016 '[' and ']' NOT '<' and '>', HOW MANY MORE TIMES! We have to explain for placement of code in post. Link to comment Share on other sites More sharing options...
vmars316 Posted April 14, 2016 Author Share Posted April 14, 2016 (edited) '[' and ']' NOT '<' and '>', HOW MANY MORE TIMES! We have to explain for placement of code in post. Ouch . Sorry , my dyslexia gets the best of me sometimes . I've seen the term 'bbcode' . Until , you used the term 'bbcode' in this context , I didn't realize that this markup is called 'bbcode' . Also , it would be more clear (to me) if the icons used above were ' ' and '' .Anyways , I've got it now . Thanks Edited April 14, 2016 by vmars316 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now