C++

Forum

 
Very dumb question about JavaScript

Pages: 12
Z feng (74)
My friend asked me to look at the code of JavaScript she did why it is wrong, I didnt learn JavaScript, so could anyone help, it should be very easy JavaScript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
<!DOCTYPE html>
<html>

  <head>
    
    <title>
   
    
    </title>
    
    
    <script>
    
    
      function getInputAsNumber(_id){return parseFloat(document.getElementById(_id).value)}
      function setOutput(_id, _value){document.getElementById(_id).value = _value}

      function calculate()
        {
      
        // declare a variable 
          var first;  
          var second;
          var third;
          var fourth;
          var fifth;
          var max;
          var beta;
          
          
        // get variable's value
            first = getInputAsNumber("firstBox")
          second = getInputAsNumber("secondBox")
          third = getInputAsNumber("thirdBox")
          fourth = getInputAsNumber("fourthBox")
          fifth = getInputAsNumber("fifthBox")
          
          
        // perform this
          max=first;
          
          if (max < second)
          {
           max = second
          }
          if (max<third)
          {
             max=third
          }
          if (max<forth)
          {
             max=forth
          }
          if (max<fifth)
          {
             max=fifth
          }
          
      
        // write Output value
          setOutput("resultAsNumber",max);
        }
      
    </script>
    
    
  </head>
    
    
  <body>
  
  
      Instruction:<br>
      
      Type 5 numbers and click Go.<br>
      
      The highest of the 5 will appear.<br>
      
      It is okay to use a decimal point.<br>
      
      <br>
  
      
      Input Values:<br>
      
      
      First  <input id="firstBox"><br>
      
      
      Second  <input id="secondBox"><br>
      
      
      Third  <input id="thirdBox"><br>  
      
      
      Fourth  <input id="fourthBox"><br>  
      
      
      Fifth  <input id="fifthBox"><br>
      
      
      
      <button onclick="calculate()">Go</button><br>
      

      <br>
      
      
      Max value:<document.write("resultAsNumber")>
      
  
  </body>
  
  
</html>


Thanks!
Last edited on
Z feng (74)
It asked user to input 5 numbers and display the max one
firedraco (6241)
There is no item on the page with the id "resultAsNumber".
Z feng (74)
what's setoutput about?
I thought it's the function of set output
Last edited on
Z feng (74)
It might be wrong to use that function tho, but how to fix it?
Athar (4466)
fourth is misspelled twice. And that sort of problem is what arrays are for.

It might be wrong to use that function tho, but how to fix it?

You add the element? It's not "wrong" to use the function per se.
Last edited on
Z feng (74)
lol that's my bad. I fixed that part, ty for pointing out. I don't think they even learn anything about array. That's just a really basic CS class.

It still cant run. Any other problem?
htirwin (1208)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
        // get variable's value
            first = getInputAsNumber("firstBox");
          second = getInputAsNumber("secondBox");
          third = getInputAsNumber("thirdBox");
          fourth = getInputAsNumber("fourthBox");
          fifth = getInputAsNumber("fifthBox");
          
          
        // perform this
          max=first;
          
          if (max < second)
          {
           max = second;
          }
          if (max<third)
          {
             max=third;
          }
          if (max<forth)
          {
             max=forth;
          }
          if (max<fifth)
          {
             max=fifth;
          }


Also need these ; at the end of statements
Z feng (74)
ok, fixed ";". Anything else?
Athar (4466)
Well, have you finally added an element with the id "resultAsNumber"?
Z feng (74)
it's here, in the function:

1
2
 
 // write Output value
          setOutput("resultAsNumber",max);



Don't know whether it's right way to use the function or not.

And 60-61 code line of the original one
Last edited on
Hippogriff (727)
I don't really use Javascript but..
Max value:<document.write("resultAsNumber")>
This isn't going to do the correct thing (as has been mentioned here before).

In the calculate function it is trying to reference an element by the id "resultAsNumber" which hasn't been defined anywhere in html. You will want to replace that document.write("resultAsNumber") with something like.
Max Value: <input type ="text" id ="resultAsNumber">

That is creating an input box with an id of resultAsNumber which can then be changed by the setOutput function above.

(Also the code is spelling fourth differently as times, double check those or it wont work).
Last edited on
Z feng (74)
OK, I did change the fourth and ; problems.

And I tried <input type ="text" id ="resultAsNumber">, just wanna know what's "text" about? And it's still not working :(
Last edited on
htirwin (1208)
OK, I did change the fourth and ; problems. 


1
2
3
4
5
6
7
 
      
function getInputAsNumber(_id){
    return parseFloat(document.getElementById(_id).value);
}
function setOutput(_id, _value){
    document.getElementById(_id).value = _value;
}


Last edited on
Hippogriff (727)
It works correctly for me once I make both of those changes I mentioned (pretty sure the ; is optional as I don't add them, but it doesn't hurt to have them).

Make sure you change both of the spelling mistakes so it looks like this. 
1
2
3
4
 
if (max<fourth)
{
      max=fourth
}


The "text" just specifies it's a textbox but it doesn't have to be included.
If it still doesn't work after you have double checked that stuff, post again or edit your post and I can look.
Z feng (74)
This is the code right now

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<!DOCTYPE html>
<html>

  <head>
    
    <title>
    
 
    
    </title>
    
    
    <script>
    
    
      function getInputAsNumber(_id){return parseFloat(document.getElementById(_id).value)};
      function setOutput(_id, _value{document.getElementById(_id).value = _value};
      function calculate()
        {
      
        // declare a variable 
          var first;  
          var second;
          var third;
          var fourth;
          var fifth;
          var max;
          var beta;
          
          
        // get variable's value
            first = getInputAsNumber("firstBox");
          second = getInputAsNumber("secondBox");
          third = getInputAsNumber("thirdBox");
          fourth = getInputAsNumber("fourthBox");
          fifth = getInputAsNumber("fifthBox");
          
          
        // perform this
          max=first;
          
          if (max < second)
          {
           max = second;
          }
          if (max<third)
          {
             max=third;
          }
          if (max<fourth)//changed 
          {
             max=fourth;//changed
          }
          if (max<fifth)
          {
             max=fifth;
          }
          
      
        // write Output value
          setOutput("resultAsNumber",max);
        }
      
   
     </script>
    
  </head>
    
  <body>
  

      Instruction:<br>
      
      Type 5 numbers and click Go.<br>
      
      The highest of the 5 will appear.<br>
      
      It is okay to use a decimal point.<br>
      
      <br>
  
      
      Input Values:<br>
      
      
      First  <input id="firstBox"><br>
      
      
      Second  <input id="secondBox"><br>
      
      
      Third  <input id="thirdBox"><br>  
      
      
      Fourth  <input id="fourthBox"><br>  
      
      
      Fifth  <input id="fifthBox"><br>
      
      
      
      <button onclick="calculate()">Go</button><br>
      

      <br>
      
      
      Max value:  <input type ="text" id ="resultAsNumber"> //changed
      

  </body>
</html>
Last edited on
Z feng (74)
It didnt display the max after I click "Go"
Hippogriff (727)
You have somehow managed to get rid of the closing parameter bracket on the setOutput function. Change it to how it was originally.
1
2
 
  
function setOutput(_id, _value){document.getElementById(_id).value = _value;}


Also the ; should be inside the function, not outside of it.
Athar (4466)
Just read what your Javascript console is displaying:
SyntaxError: missing ) after formal parameters
function setOutput(_id, _value{document.getElementById(_id).value = _value};
------------------------------^


Z feng (74)
Thank you very much! It's runing good!

Because I am studying C++, like I just said, it's my friend's code, I can only help her logic, but can't help the codes, i even didnt have the compiler to compile this JavaScript, I just pick up an online instant compiler to run the program!

Thank you very much for your guys help! I really appreciate!
Pages: 12