By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,480 Members | 1,214 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,480 IT Pros & Developers. It's quick & easy.

Javascript onClick Error

risk32
P: 98
Hi all. I have a problem with an onClick function working when I click a button. The infamous IE error reporting links it back to the button itself, but I don't think that's the case (Line 48, 49 - Object doesn't support this property or method). The code itself isn't complete since I just started and can finish the rest later. Anyways, here's what I have so far...

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script type="text/javascript">
  3. // if zulu - > time is checked
  4.    var hour1 = document.time.getElementByName("hour").value;
  5.    var minute1 = document.time.getElementByName("minute").value;
  6.    parseInt(hour1);
  7.    parseInt(minute1);
  8.  
  9.   function local()
  10.    {
  11.  
  12. if (hour1 > 05 & < 23)
  13.    {
  14.       hour1 = hour1 - 5;
  15.    }
  16. else if (hour1 = 00)
  17.    {
  18.       hour1 = 19;
  19.    }
  20. else if (hour1 = 01) //line 20
  21.    {
  22.       hour1 = 20;
  23.    }
  24. else if (hour1 = 02)
  25.    {
  26.       hour1 = 21;
  27.    }
  28. else if (hour1 = 03)
  29.    {
  30.       hour1 = 22;
  31.    }
  32. else if (hour1 = 04)
  33.    {
  34.       hour1 = 23;
  35.    }
  36.  else
  37.    {
  38.       hour1 = 00;
  39.    }
  40. document.time.hour= hour1 //line 40
  41. }
  42. </script>
  43. <form name=time>
  44. <center>
  45. <input type="text" maxlength=2 size=2 id="hour" name="hour" ></input> : 
  46. <input type="text" maxlength=2 size=2 id="minute" name="minute"></input>
  47. <br>
  48. <input type="button" id="local" value="Local -> Zulu" onClick="zulu()"></input>
  49. <input type="button" id="zulu" value = "Zulu -> Local" onClick="local()"></input><br>
  50. </form>
  51. </html>
  52.  
Aug 18 '09 #1
Share this Question
Share on Google+
22 Replies


Dormilich
Expert Mod 5K+
P: 8,639
you have errors on line 4, 5 & 12:
Expand|Select|Wrap|Line Numbers
  1. getElementsByName()
Expand|Select|Wrap|Line Numbers
  1. if (hour1 > 05 & < 23) ???
  2.  
  3. // maybe you mean
  4. if (hour1 > 05 && hour1 < 23)
Aug 18 '09 #2

risk32
P: 98
Dormilich,
There's still an error somewhere. I changed the &&. Also, why would I use the getElements when there is only one element to get a value from?
Aug 18 '09 #3

freddieMaize
P: 85
@risk32
:) Because that is the syntax

Freddie
Aug 18 '09 #4

risk32
P: 98
freddieMaize,
There's also a syntax for a single element, getElementBy(Id, Name, Type...)
Aug 18 '09 #5

Dormilich
Expert Mod 5K+
P: 8,639
@risk32
there isn’t*. (see ref.) everything else is getElementsBy*()

* - because the id attribute is the only one defined as unique (see html DTD).
Aug 18 '09 #6

risk32
P: 98
Ah ok.. the getElement is only for ID while getElements is for Names. I got the code to produce no errors, but it's not updating the text box. I'm researching how to use objects to do this.

Expand|Select|Wrap|Line Numbers
  1.     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
  5. <script type="text/javascript">
  6. // if zulu - > time is checked
  7.  
  8.  
  9.   function local()
  10.    {
  11.  
  12.    var hour1; 
  13.    hour1 = document.getElementsByName("hour").value;
  14.    var minute1; 
  15.    minute1 = document.getElementsByName("minute").value;
  16.    parseInt(hour1);
  17.    parseInt(minute1);
  18.  
  19. if (hour1 > 05 && < 23)
  20.    {
  21.       hour1 = hour1 - 5;
  22.    }
  23. else if (hour1 = 00)
  24.    {
  25.       hour1 = 19;
  26.    }
  27. else if (hour1 = 01)
  28.    {
  29.       hour1 = 20;
  30.    }
  31. else if (hour1 = 02)
  32.    {
  33.       hour1 = 21;
  34.    }
  35. else if (hour1 = 03)
  36.    {
  37.       hour1 = 22;
  38.    }
  39. else if (hour1 = 04)
  40.    {
  41.       hour1 = 23;
  42.    }
  43.  else
  44.    {
  45.       hour1 = 00;
  46.    }
  47. parseString(hour1);
  48. parseString(minute1);
  49. document.hour.write(hour1);
  50.    }
  51.  
  52.  
  53.    function zulu()
  54.    {
  55.    var hour2; 
  56.    hour2 = document.getElementsByName("hour").value;
  57.    var minute2;
  58.    minute2 = document.getElementsByName("minute").value;
  59.    parseInt(hour2);
  60.    parseInt(minute2);
  61.  
  62.    if (hour2 < 19)
  63.      {
  64.         hour2 = hour2 + 5;
  65.      }
  66.  
  67.    else if (hour2 = 20)
  68.      {
  69.         hour2 = 01;
  70.      }
  71.  
  72.    else if (hour2 = 21)
  73.      {
  74.         hour2 = 02;
  75.    else if (hour2 = 22)
  76.      {
  77.         hour2 = 03;
  78.      }
  79.    else if (hour2 = 23)
  80.      {
  81.         hour2 = 04;
  82.      }
  83. parseString(hour2);
  84. parseString(minute2);
  85. document.hour.write(hour2);
  86.    }
  87. </script>
  88. <title></title>
  89. </head>
  90. <body>
  91. <center>
  92.  
  93. <input type="text" name="hour" maxlength="2" size="2">:
  94. <input type="text" name="minute" maxlength="2" size="2"><br>
  95. <input type="button" id="local" value="Local -&gt; Zulu" onclick="function zulu()">
  96. <input type="button" id="zulu" value="Zulu -&gt; Local" onclick="function local()">
  97. <br></center>
  98. </body>
  99. </html>
  100.  
Aug 18 '09 #7

risk32
P: 98
OK... I've gotten rid of the BS I don't need in my code. There's no point of messing with the minute portion of it, so I took it out. Hopefully I did the parseInt() portion of it right. After doing the mathematical functions to the recently parsed strings, I need to convert the integers back to strings to input them in the text box, right?? I'm kinda lost. The document.write(hour) doesn't seem to be working. I would imagine that it's doing nothing with it, because I am not specifiying where exactly to write the string. I'm so close to being done, but yet so far away. According to IE, there's an object that is missing, but I can't figure out what it is.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script type="text/javascript">
  3. // if zulu - > time is checked
  4.  
  5. function localToZulu()
  6.    {
  7.   var hour = document.getElementByValue("hour");
  8.   parseInt(hour);
  9. if (hour > 05 && < 23)
  10.    {
  11.       hour = hour - 5;
  12.    }
  13. else if (hour == 00)
  14.    {
  15.       hour = 19;
  16.    }
  17. else if (hour == 01)
  18.    {
  19.       hour = 20;
  20.    }
  21. else if (hour == 02)
  22.    {
  23.       hour = 21;
  24.    }
  25. else if (hour == 03)
  26.    {
  27.       hour = 22;
  28.    }
  29. else if (hour == 04)
  30.    {
  31.       hour = 23;
  32.    }
  33.  else
  34.    {
  35.       hour = 00;
  36.    }
  37.  
  38. }
  39.  
  40. stringHour = parseString(hour);
  41. document.hour.write(stringHour);
  42.  
  43. // if local time is checked
  44.    function zuluToLocal()
  45.    {
  46.  var hour = document.getElementByName("hour");
  47.  parseInt(hour);
  48.    if (hour < 19)
  49.      {
  50.         hour = hour + 5;
  51.      }
  52.  
  53.    else if (hour == 20)
  54.      {
  55.         hour = 01;
  56.      }
  57.  
  58.    else if (hour == 21)
  59.      {
  60.         hour = 02;
  61.      }
  62.    else if (hour == 22)
  63.      {
  64.         hour = 03;
  65.      }
  66.    else if (hour == 23)
  67.      {
  68.         hour = 04;
  69.      }
  70. }
  71.  
  72. stringHour = parseString(hour);
  73. document.hour.write(stringHour);
  74.  
  75. </script>
  76. <center>
  77. &nbsp;Hour Minute<br><input type="text" size=2 maxlength=2 name="hour">
  78. <input type="text" size=2 maxlength=2 name="minute">
  79. <br>
  80. <input type="button" value="Local" onClick="zuluToLocal()">
  81. <input type="button" value="Zulu" onClick="localToZulu()">
  82. </center>
  83. </html>
  84.  
Aug 18 '09 #8

Dormilich
Expert Mod 5K+
P: 8,639
Expand|Select|Wrap|Line Numbers
  1. function localToZulu()
  2. {
  3. // this method does not exist
  4.   var hour = document.getElementByValue("hour"); 
  5.  
  6. // hour is not affected by parseInt(), you need to assign the return value
  7.   parseInt(hour);
  8.  
  9. // invalid syntax, operand missing
  10. if (hour > 05 && < 23)
  11.  
  12. }
  13.  
  14. // not necessary here, JavaScript does type conversation automatically
  15. stringHour = parseString(hour);
  16.  
  17. // write() is a method of document only
  18. document.hour.write(stringHour);
  19.  
  20. function zuluToLocal()
  21. {
  22. // this method does not exist
  23. var hour = document.getElementByName("hour");
  24. }
just out of interest, do you have any JavaScript reference work where you can look up?
Aug 18 '09 #9

risk32
P: 98
My reference material is limited due to the fact I'm on a government computer.
I'll look at home to see if I can find anything. I'm used to using Java so JS seems comfusing to me in some aspects. The amount you can do in JS is limiting.
Aug 18 '09 #10

Dormilich
Expert Mod 5K+
P: 8,639
@risk32
Java and JavaScript hardly have anything in common. Don’t try to conclude from one to the other, this will only get you in trouble.

for instance:
while Java’s inheritance is class based, JavaScript’s inheritance is prototype based (see wikipedia for explanation).
you can add/alter/delete properties and methods in JavaScript anytime you want, even at runtime.

@risk32
you have hardly an idea what you actually can do with JavaScript. You’d be surprised…

JavaScripts possibilities depend on the JS parser used (this may be a browser, but I’ve also seen a game engine using it)
Aug 18 '09 #11

gits
Expert Mod 5K+
P: 5,390
@risk32
Just by not knowing a language doesn't mean that it is limiting per se ... it is just limiting the 'unknowing' people ... i.e. if i don't know how to speak zulu it is limiting me! unless i have learned it ... but it isn't a limiting language itself because all native 'zulu'-speakers can have very unlimited conversations :) JavaScript has much greater potential as most people think ... even though it does have its limits of course ... like any other programming language has.

kind regards
Aug 19 '09 #12

risk32
P: 98
OK...OK.... I'll admit it... I'm a fool when it comes to JS. I've only been able to pick up bits and pieces from other's work (no, i don't use what they code... that's pretty much stealing when it's not open source) and from reference material I just so happen to stumble upon when doing a google search. With the code I'm trying to produce, basically just simple math then displaying the number back into the text back, do I have the right basic idea?
Aug 19 '09 #13

Dormilich
Expert Mod 5K+
P: 8,639
@risk32
mmmmh……… no.

replacing text in form elements is (mostly) simple:
Expand|Select|Wrap|Line Numbers
  1. // input is the corresponding <input> element
  2. input.value = "new_value";
if you want one single element, use an id:
Expand|Select|Wrap|Line Numbers
  1. // the html element
  2. <input id="box1" type="text" name="…" … >
  3.  
  4. // now in JS
  5. var input = document.getElementById("box1");
  6.  
  7. // read what’s typed in
  8. var usertext = input.value;
  9. // if you want an integer
  10. var userint = parseInt(input.value);
if you do comparisons, the syntax is always ([] - optional):
[ ( ] operand operator operand [ ) ]
ex:
x < 1 && x > -1 or ((x < 1) && (x > -1))
note that the result of one of those comparison expressions is evaluated as boolean.
Aug 19 '09 #14

risk32
P: 98
So basically, I create a variable to capture the input from the text box (I used "hour" for the Id)...
Expand|Select|Wrap|Line Numbers
  1. var hour1 = document.getElementById("hour");
  2.  
Seems simple enough... When replacing the text like you said, would I be in the righrt to do this?
Expand|Select|Wrap|Line Numbers
  1. var text = hour1.value;
  2.  
If it's right, how would I use the text variable to replace what's in the text box?
Aug 19 '09 #15

Dormilich
Expert Mod 5K+
P: 8,639
@risk32
yupp.

@risk32
Expand|Select|Wrap|Line Numbers
  1. hour1.value = new_text;
Aug 19 '09 #16

risk32
P: 98
@Dormilich

I must apologize for asking so many questions that seem fairly easy to you guys. IE is saying I have an error (Object Expected, Line 89). I've looked at the coding but everything "seems" right... The buttons are correctly directed to the JS functions. At least from what I can tell. Could you tell me if I put the code in the correct order? I put the variable before the function so that it will exist before the function starts. Then I put the hour1.value after the functions so that no matter which button is pressed, the result would still be the same.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script type="text/javascript">
  3. // if zulu - > time is checked
  4.  
  5.  
  6.  
  7.  
  8. var hour1 = document.getElementById("hour");
  9.  
  10.   function localToZulu()
  11.    {
  12.  
  13.  
  14.  
  15. if ((hour1 > 05 && < 23))
  16.    {
  17.       hour1 = hour1 - 5;
  18.    }
  19. else if (hour1 == 00)
  20.    {
  21.       hour1 = 19;
  22.    }
  23. else if (hour1 == 01)
  24.    {
  25.       hour1 = 20;
  26.    }
  27. else if (hour1 == 02)
  28.    {
  29.       hour1 = 21;
  30.    }
  31. else if (hour1 == 03)
  32.    {
  33.       hour1 = 22;
  34.    }
  35. else if (hour1 == 04)
  36.    {
  37.       hour1 = 23;
  38.    }
  39.  else
  40.    {
  41.       hour1 = 00;
  42.    }
  43.  
  44.  
  45.  
  46. }
  47.  
  48.  
  49.  
  50.  
  51. // if local time is checked
  52.    function zuluToLocal()
  53.    {
  54.  
  55.  
  56.    if (hour1 < 19)
  57.      {
  58.         hour1 = hour1 + 5;
  59.      }
  60.  
  61.    else if (hour1 == 20)
  62.      {
  63.         hour1 = 01;
  64.      }
  65.  
  66.    else if (hour1 == 21)
  67.      {
  68.         hour1 = 02;
  69.      }
  70.    else if (hour1 == 22)
  71.      {
  72.         hour1 = 03;
  73.      }
  74.    else if (hour1 == 23)
  75.      {
  76.         hour1 = 04;
  77.      }
  78.  
  79.  
  80. }
  81.  
  82. hour1.value = new_text;
  83.  
  84. </script>
  85. <center>
  86. &nbsp;Hour Minute<br><input type="text" id="hour" size=2 maxlength=2  value="">
  87. <input type="text" size=2 maxlength=2 name="minute">
  88. <br>
  89. <input type="button" value="Local" onClick="zuluToLocal()">
  90. <input type="button" value="Zulu" onClick="localToZulu()">
  91. </center>
  92. </html>
  93.  
Aug 19 '09 #17

Dormilich
Expert Mod 5K+
P: 8,639
@risk32
ah, well, a matter of experience

@risk32
unfortunately this conclusion doesn’t work. line 8 and 82 will only be executed on (before) page load plus you assign an undefined value to an undefined element. after that line 8 and 82 will not be executed any more.

if you then call the functions hour1 still doesn’t exist (is undefined). further you don’t access the input value.

you have to put the get/set operations inside the functions (because only the functions are executed):
Expand|Select|Wrap|Line Numbers
  1. function localToZulu()
  2. {
  3.   var hour = parseInt(this.value);
  4.  
  5.   if (1 == hour)
  6.   {
  7.     hour = 20;
  8.   }
  9.   // etc.
  10.  
  11.   this.value = hour;
  12. }
line 15 still is wrong

further you can improve you conditions, you can reduce it to one singe if statement. (you can get off with 5 lines of code (brackets not included) for your time conversion function.)
Aug 20 '09 #18

risk32
P: 98
Here's something I've been taking a look at... Don't know if it will work or not, but it looks like it would if I split it up.
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function changeText2(){
  3.     var userInput = document.getElementById('userInput').value;
  4.     document.getElementById('boldStuff2').innerHTML = userInput;
  5. }
  6. </script>
  7. <p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
  8. <input type='text' id='userInput' value='Enter Text Here' />
  9. <input type='button' onclick='changeText2()' value='Change Text'/>
  10.  
From the way this is displayed, I could change the id of "userInput" to "display", and have the text displayed after the buttons, in a <p> section... I'll see if it works.
Aug 20 '09 #19

risk32
P: 98
OK... I got it to work. But there's a problem... I'm not sure how to format the numbers to include a 0 in front of the number. I remember doing something like this in my JAVA class, but it's been a while. Does this sound right?

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. hour = "0" + (hour + 5);
  4. hour = "0" + (hour - 5);
  5.  
  6.  
I also haven't been able to figure out how to replace the original number in the text box, but what I did works...

Expand|Select|Wrap|Line Numbers
  1. // JS...
  2. function zuluToLocal()
  3.    {
  4.        var hour1 = document.getElementById("hour").value;
  5.     var minute1 = document.getElementById("minute").value;
  6.     var hour = parseInt(hour1);
  7.  
  8.  
  9. if (hour > 05 && hour < 23)
  10.    {
  11.       hour = hour - 5;
  12.    }
  13. else if (hour = 00)
  14.    {
  15.       hour = 19;
  16.    }
  17. else if (hour = 01)
  18.    {
  19.       hour = 20;
  20.    }
  21. else if (hour = 02)
  22.    {
  23.       hour = 21;
  24.    }
  25. else if (hour = 03)
  26.    {
  27.       hour = 22;
  28.    }
  29. else if (hour = 04)
  30.    {
  31.       hour = 23;
  32.    }
  33.  else
  34.    {
  35.       hour = 00;
  36.    }
  37.  
  38.  document.getElementById("div1").innerHTML=(hour + ' ' + minute1);
  39.  
  40. }
  41.  
  42. // HTML...
  43. <center>
  44. &nbsp;Hour Minute<br><div id="div1"> <input type="text" id="hour" size=2 maxlength=2>
  45.  <input type="text" size=2 maxlength=2 name="minute">
  46. </div>
  47. <br>
  48. <input type="button" value="Local" onClick="zuluToLocal()">
  49. <input type="button" value="Zulu" onClick="localToZulu()">
  50. <p id="display"></p>
  51. </center>
  52. </html>
  53.  
Aug 20 '09 #20

Dormilich
Expert Mod 5K+
P: 8,639
@risk32
looks good

@risk32
what about:
Expand|Select|Wrap|Line Numbers
  1. function zuluToLocal()
  2.    {
  3.         var hour1 = document.getElementById("hour");
  4.     var hour = parseInt(hour1.value);
  5.  
  6. // hour conversion
  7.  
  8.         hour1.value = hour;
  9.    }
Aug 20 '09 #21

risk32
P: 98
@Dormilich
I tried your suggestion. Seems to be working just fine. Thanks for all the help/
Aug 21 '09 #22

Dormilich
Expert Mod 5K+
P: 8,639
if you're used to it, JavaScript is not complicated after all.
Aug 21 '09 #23

Post your reply

Sign in to post your reply or Sign up for a free account.