JavaScript Forum

**Chansen** · 01-14-2010, 04:52 PM

On a normal basis I do not work with javascript at all, I got this js-calc-task to do, with the words, ”you figure it out!”, which left me feeling as an absolute zero from the get go. The task is a special (laaarge) calculator, and compared to my knowledge of js when I started out, I have managed to write aprox 70% of it, so now I feel less of a zero (but yet, still a zero tho ;-).

I have been staring blind for 12 days on my option problem:

This is what it need to do:
User select between (input_g):
Option 50%
Option 100%
Option 150%

After user select an option
each option need to calculate three numbers; fx Option 50% will be “50/100*c”. For 100% itll be “100/100*c” and the last one “150/100*c”.

The end result should be shown in a span-tag <span id="input_g"></span>
--

I have written
function dropdown_value() {
select_element = document.getElementById('input_g');
input_g = select_element.options[select_element.selectedIndex].value;
alert(input_g);
}

And the variable being:
var input_g = input_g/100*c;

The option code looks like this:
<select id="input_g" onchange="dropdown_value();">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
</select>

But nothing comes out (not even a zero ;-).. Does anyone see what the problem is?

**JeremyMiller** · 01-14-2010, 05:17 PM

1) You don't define "c" anywhere.
2) You use 2 id's of the same value.

I changed it a bit and this works:

HTML Code:

<html>
  <head>
  <script>
  var c = 123;
  function dropdown_value() {
    select_element = document.getElementById('input_g');
    input_g = parseInt(select_element.options[select_element.selectedIndex].value);
    input_g = input_g/100*c
    document.getElementById('input_g_calculated').innerHTML = input_g;
  }
  </script>
  </head>
  <body>
  <select id="input_g" onchange="dropdown_value();">
    <option value="0"> &mdash; CHOOSE ONE &mdash; </option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="150">150</option>
  </select>
  <span id="input_g_calculated"></span>
  </body>
</html>

**Chansen** · 01-14-2010, 06:01 PM

Thank you for answering :-)

C is user defined earlier on:
c = document.getElementById("input_c").value;
if (isNaN(c)) {
errors.push("C is not a number!<br />");
} else {
c = parseFloat(c);
}

Your version alone or in my code gives the same yellow annoying error and no answer.

IE8 here.

**JeremyMiller** · 01-14-2010, 06:03 PM

A couple of typos:

HTML Code:

<html>
  <head>
  <script>
  var c = 123;
  function dropdown_value() {
    var select_element = document.getElementById('input_g');
    var input_g = parseInt(select_element.options[select_element.selectedIndex].value);
    input_g = input_g/100*c;
    document.getElementById('input_g_calculated').innerHTML = input_g;
  }
  </script>
  </head>
  <body>
  <select id="input_g" onchange="dropdown_value();">
    <option value="0"> &mdash; CHOOSE ONE &mdash; </option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="150">150</option>
  </select>
  <span id="input_g_calculated"></span>
  </body>
</html>

**Chansen** · 01-14-2010, 06:09 PM

So I have checked in Firefox, and yours work there, but not mine... so something is fundamentally wrong with mine

As a workaround.. I was wondering if IE work better with radio buttons, what are your thoughts on that?

**JeremyMiller** · 01-14-2010, 06:11 PM

It shouldn't matter which browser you're using. I've tested this in both IE 8 and FF 3.5 and it worked (the last code, not the first).

**Chansen** · 01-14-2010, 06:15 PM

Ups, you are fast. Now your code works fine in IE8. But mine... nope. Weird.

**JeremyMiller** · 01-14-2010, 06:26 PM

Then you'll need to give additional information... all code works, just not necessarily as intended.

**Chansen** · 01-14-2010, 06:33 PM

Your code is the way it should work. Everything in my calculator works, Firebug having no trouble with my code (thats weird), the only thing that doesnt work is the option thing.

I can choose any of the 3 options, but no answer.

**JeremyMiller** · 01-14-2010, 06:36 PM

Hit tab after changing the value to trigger the onChange event. Might want to have a button to activate that.

**Chansen** · 01-14-2010, 06:48 PM

I was wondering in the same area. My code is programmed with a timer on user entries earlier on. It has of course timed out a long time ago. Hmm...

**JeremyMiller** · 01-14-2010, 06:48 PM

I'm confused.

**Chansen** · 01-14-2010, 06:55 PM

I understand.

I check if all user input fields are filled in and after the last entry (6 if them) there is a timer set on 800 ms. What I dont do - I dont check on the option input field (the new 7th) - Maybe this is the core problem here.

**JeremyMiller** · 01-14-2010, 06:57 PM

Sounds like you're on the issue, then. If you're stuck after trying a solution, then post the code here.

**Chansen** · 07:11 PM

HTML Code:

<script>
var t; // variabel to save timeout event
function pre_beregn() {
    input_fields = document.getElementsByName("input_felt");
    empty = 0;
    for (var i=0; i<input_fields.length; i++) { // are all fields filled in?
        if (input_fields[i].value == "") empty = 1;
    }
    if (empty == 0) { // all fields are filled
        t = setTimeout("beregn()",800); // run calc
    }
</script>

I tried to shuffle "select_element = document.getElementById('input_g');" in there after "input_fields=....", but no luck

**JeremyMiller** · 01-14-2010, 07:14 PM

Not sure that that's a very good method given how it worked for me, but here's the modified code:

HTML Code:

<html>
  <head>
  <script>
  var c = 123;
  function dropdown_value() {
    var select_element = document.getElementById('input_g');
    var input_g = parseInt(select_element.options[select_element.selectedIndex].value);
    input_g = input_g/100*c;
    document.getElementById('input_g_calculated').innerHTML = input_g;
  }
var t; // variabel to save timeout event
function pre_beregn() {
  input_fields = document.getElementsByName("input_felt");
  empty = 0;
  for (var i=0; i<input_fields.length; i++) { // are all fields filled in?
      if (input_fields[i].value == "") empty = 1;
  }
  if (empty == 0 && document.getElementById('input_g').options.selectedIndex == 0) { // all fields are filled
      t = setTimeout("beregn()",800); // run calc
  }
}
t = setTimeout("beregn()",800);
  </script>
  </head>
  <body>
  <select id="input_g" onchange="dropdown_value();">
    <option value="0"> &mdash; CHOOSE ONE &mdash; </option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="150">150</option>
  </select>
  <span id="input_g_calculated"></span>
  </body>
</html>

**Chansen** · 01-14-2010, 07:47 PM

This is nasty. If we change this timer event it will conflict with shown calculations in between the user input field 6 (which my timeout code handles) and the new user input option 7. It wont work. Hmm... And even if I run true the calculator, filling out the 6 fields, selecting an option.. it still doesnt work. Now I am really lost.

**Chansen** · 01-14-2010, 07:52 PM

In other words, lotsa NaN's

**Chansen** · 01-14-2010, 08:07 PM

Dont respond, I am working on another option to solve this problem. Ill return.

**Chansen** · 01-14-2010, 08:47 PM

Tried solutions that didnt work
1) If I set the select option in the beginning of the document (Line 14 to Line 00), forcing users to select before the timer-events input fields (Line 6), no calculations comes out (Line 7 to 13) and no answer is given from the option selection (Line 15). This with your new TimeOut code.
2) If I keep the old TimeOut code, and set the selection at the beginning of the document (Line 14 to Line 00), again to force a selection before the timeOut event kicks in (Line 6), I get no answer from the option selection (Line 15). But I do get my calculations shown (Line 7 to 13).

This is how it looks on the html page, (with text after the line numbers...)
01 a // user input
02 b // user input
03 c // user input
04 d // user input
05 e // user input
06 f // user input - timeout event runs
....
07 total = a*b*c*d*e*f //result shown - these are in between calcs shown to user after run of timeout event
08 totalb = a*b*c // result shown
09 totalc = totalb/d // result shown
10 totald = total/45 // result shown
11 totale = totald/a // result shown
12 copy from a
13 copy from b
....
14 Select option <---- Pirate AAaaRRRrgggghh!
15 input_g_calculated // result shown <---- Pirate AAaaRRRrgggghh!
16 copy from d
[etc.]

Any good ideas? Or maybe this is getting pretty difficult to understand... Maybe I should clean up the page, and show the whole thing..