VirtualMV/JavaScript/HelpDesk - Interactive

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.

Problem 14: Checking a number has been entered

This is actually quite tricky but here is a solution

Solution

function fnCheckNum(strName) {
	strName.style.background = "#FFFFFF";
	var num = parseInt(strName.value,10);
    if(Number.isInteger(num)){
        return true
    } else {
        strName.style.background = "#FBEC5D";
		return false
    }
}

Problem 13: getElementById and innerHTML returns an error

You have entered the following code

document.getElementByID("test").innerHTML = "TestData";

and it returns

Error message: File.html:13 Uncaught TypeError: document.getElementByID is not a function

Solution
The problem here is that getElementByID should be getElementById (Id not ID) so document.getElementById("test").innerHTML = "TestData";

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 November 5, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/HelpDesk_-_Interactive (zotero)

Internet & Web development (2)
Overview	JS and HTML \| Resources \| Help Desk ( Interactive )
Getting Started	Basics \| Layout and syntax \| Operators \| Strings and Numbers \| Controlling flow \| Functions
Forms	Document Object \| Input Box \| Select \| Radio Button \| Check Box \| Example \| getElement \| Events
Techniques	Iteration (while, for, do) \| Strings \| Validation ( Regular Expressions ) \| Calculations
Objects	Array \| Table \| Window
Multimedia	Images \| Animations \| Video \|
Extensions	Accessibility \| Interactivity \|
Object-Oriented	\|
Case Study: Forms	Create Form \| Variables \| Skeleton \| De-bugging \| Validation Detail \| Calculations \| Table Object \| Pop-up Window \| Files

VirtualMV/JavaScript/HelpDesk - Interactive

Overview

Instructions

Problem 14: Checking a number has been entered

Problem 13: getElementById and innerHTML returns an error

Problem 12: Opening a window and creating the hml file in js gives a blank window

Problem 11: changing code has noeffect

Problem 10: an input field won't accept background style

Problem 9: Trying to change the innerHTML of an element returns an error

Problem 8: When you click Add row to a table, the row is added, the screen flashes and the row disappears

Problem 7: A getElementbyID doesn't work

Problem 6: A window open causes a JavaScript error

Problem 5: Adding two numbers js file

Problem 4: Linked js file

Problem 3: Comments

Problem 2: variables

Problem 1: variables

References

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Community

Print/export

Tools