VirtualMV/JavaScript/HelpDesk - Interactive
From WikiEducator
< VirtualMV | JavaScript
Overview
This page can be used in a group situation to discuss problems that can occur when coding. The problem is presented and after discussion a potential solution can be revealed.
Instructions
On this page you can post some JavaScript code that you are having trouble with.
- Please keep the code "simple" concentrating on the problem ... not a lot of code with a "small" problem.
- Post a tweet including the #vmvwiki tag so that we know there is a problem waiting to be solved.
- Paste the following wiki code when you edit, and put your code where shown.
{{vmv:Source|<source lang="javascript">
Code in here
</source>}}
Problem 12: Opening a window and creating the hml file in js gives a blank window
In your JavaScript you have
winMsg=window.open("","_blank"); winMsg.document.write("<html><head><title>Hire Summary<title>"); winMsg.document.write("</head>"); winMsg.document.write("<body>"); winMsg.document.write("<h2>Hire Summary<h2>"); winMsg.document.write("</body></html>");
| Solution |
|---|
| Note the title tag is not closed so the entire html file is treated as a title
</source>}} |
Problem 11: changing code has noeffect
In your JavaScript you have
and even changing the code has no effect.
| Solution |
|---|
| Check you haven't got two functions with the same name (they may be in different files e.g. the html and js)
</source>}} |
Problem 10: an input field won't accept background style
In the HTML you have entered the following code
<input type="text" id="nameLastFirst" name="nameLastFirst" maxlength="30">In your JavaScript you have
var name = document.getElementById("nameLastFirst"); name.style.backgroundColor = "yellow";
and it returns and undefined error.
| Solution |
|---|
Don't use the reserved word name as a variable. My suggestion is to prefix variable names to avoid this issue e.g. txtName
var txtName = document.getElementById("nameLastFirst"); txtName.style.backgroundColor = "yellow" |
Problem 9: Trying to change the innerHTML of an element returns an error
You have entered the following code
<head> <script> document.getElementById("idBusiness").innerHTML = "my business name"; </script> </head> <body> <h1 id="idBusiness">??</h1> </body>
and it returns and undefined error.
| Solution |
|---|
The Javascript is at the start of the html page. This means it is trying to update the innerHTML of an element that hasn't yet been created. Either move the JavaScript to the bottom of the HTML code or include the code in the window.onload function (which is run immediately after the page has been rendered.. as follows)
window.onload = function() { document.getElementById("idBusiness").innerHTML = "my business name"; } Note: If you are linking to a js file you will need to either move the link to the bottom of the HTML page, or use the onload function. |
Problem 8: When you click Add row to a table, the row is added, the screen flashes and the row disappears
You have entered the following code
<form name="frmStuff" > <p>Description<input id="txtdesc" type="text" value=""/></p> <p><input type="submit" value="Add Row to table" onClick="fnaddToTable()"></p> <table id= "bookingTable" border="1"> <tr><th>Type</th><th>Description</th></tr> </table> </form>
and When you click Add row to Table, the row is added, the screen flashes and the row disappears.
| Solution |
|---|
Solution, in the code you probably have the wrong input type (type = submit). The correct type is button
<p><input type="button" value="Add Booking" onClick="fnaddToTable()"></p> A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. |
Problem 7: A getElementbyID doesn't work
You have entered the following code
<html> <head> <script type="text/javascript"> function displayResult() { alert( "Name is " + document.getElementById("txtFName").value); } </script> </head> <body> <form name="myForm"> <p>Enter Your Fullname:<input type="text" name="txtFName" value="" /></p> <p><button type="button" onclick="displayResult()">Display Name</button></p> </form> </body> </html>
and it doesn't work.
| Solution |
|---|
The getElementById requires an id not a name (also watch that getElementById has correct capitals)
<p>Enter Your Fullname:<input type="text" id="txtFName" value="" /></p> |
Problem 6: A window open causes a JavaScript error
You have entered the following code
winMsg=window.open("","Display Window","scrollbars=yes, resizable=yes");
and it doesn't work.
| Solution |
|---|
The problem here is the name of the window CANNOT include spaces, so
winMsg=window.open("","DisplayWindow","scrollbars=yes, resizable=yes"); // is OK winMsg=window.open("","Display Window","scrollbars=yes, resizable=yes"); //is NOT OK |
Problem 5: Adding two numbers js file
one.html
<html> <head> <title>Add two numbers</title> <script type="text/javascript"> function fnCalcTotal() { vntAmount1=frmAdd.txtAmount1.value; vntAmount2=frmAdd.txtAmount2.value; document.frmAdd.txtTotal.value = (parseFloat(vntAmount1) + parseFloat(vntAmount2)); } </script> </head> <body> <form name="frmAdd"> <p>With these two numbers:<br /> Number 1<input name="txtAmount1" type="text" value="$100" /><br /> Number 2<input name="txtAmount2" type="text" value="$200" /></p> <p><input type="button" name="Submit" value="Calculate total" onClick="fnCalcTotal()" /></p> <p><input name="txtTotal" type="text" value="" /></p> </form> </body> </html>
When Calculate button clicked - Error: Line 8, Character 5, Object expected
| Solution |
|---|
The problem here is you are trying to add a string value $100 + $200
Number 1<input name="txtAmount1" type="text" value="100" /><br /> Number 2<input name="txtAmount2" type="text" value="200" /></p> |
Problem 4: Linked js file
one.html
<html> <head></head> <body> <script type="text/javascript" src="one.js"></script> </body> </html>
one.js
<script type="text/javascript">
document.write("This script is external");
</script>
| Solution |
|---|
The problem here is that in the .js file you don't include the script tag. The js file should only contain...
document.write("This script is external"); |
Problem 3: Comments
<html> <head></head> <body> <div style="color: #0000FF"> <script type="text/javascript"><!-- document.write('<h1>Hello world.. JavaScript rulz!</h1>') //--></script></div></body></html>
| Solution |
|---|
The problem here is that anything after the comment tag is treated as a comment
<!-- document.write('<h1>Hello world.. JavaScript rulz!</h1>') //--> |
Problem 2: variables
<html> <body> <script type="text/javascript"> var intA = 3; var intSum = inta + 5; document.write("Adding 5 to intA is " + intSum +"<br />"); </script> <p>This example 5 is added to a variable.</p> </body> </html>
| Solution |
|---|
The problem here is that JavaScript variable names are case sensitive so inta is not the same as intA, or INTA.
var intSum = intA + 5; |
Problem 1: variables
<html> <body> <script type="text/javascript"> var intA = 3; int intB = 5; var intSum = intA + intB; document.write("The sum of 3 and 5 is " + intSum +"<br />"); </script> <p>This example shows the sum of two numbers.</p> </body> </html>
| Solution |
|---|
The problem here is that JavaScript has untyped variables. You have probably been programming in C# or other language where variables are typed (e.g. int, etc.) in JavaScript we use var!!
var intB = 5; |
References
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/JavaScript/HelpDesk - Interactive. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 25, 2024, from http:https://c.wikieducator.org/VirtualMV/JavaScript/HelpDesk_-_Interactive (zotero)
|
