+ 3

Need Help with Basic Web Development

I was trying to write a code for a fancy calculator. I want to change the arithmetic symbol when the radio buttons are toggled. I tried something but its not working. I haven't wrote the whole calculation algorithm (just the addition operation for testing) yet so ignore that please. I want to know where I'm going wrong. https://code.sololearn.com/WtS8mMeVwcN7 PS: I JUST begun web developing.

javascript web development

9th Jun 2017, 9:58 PM

Casey McCray

8 Answers

+ 7

@Casey McCray wrote: << tried the window.onload = function() {} suggestion but that just made the variables undefined for some reason. Can anyone explain that? >> You probably don't exactly as indicated: put ALL your code inside the curly brackets ( anonymized function body ), and it will work ^^ About the test of the 'checked' attribute: this is a boolean value, so if you strickly compare ( === ), you must compare with a boolean, not a string: if (x[i].checked === true) { ... without quotes (else comparing to the string 'true', not the boolean value), or with simple comparaison ( == ) you can compare with any true/false equivalent ( 1 == true ) as you do in your second version... Anyway, your 'hard' checked sign is multiplication, but your 'hard' sign value display is '+' ('hard' meaning 'in code', contrarly to 'soft' for 'at runtime' ), and you can improve user experience by using <label> for your radio buttons using its 'for' attribute to associate them with each 'id' value (so clicking on label will select/check corresponding radio button): <input type="radio" id="uniqueRadioID"><label for="uniqueRadioID">operation</label>

10th Jun 2017, 9:39 PM

visph

+ 14

I'm not sure if this "solves" your problem but add this to the top of the JavaScript: window.onload = function(){ And add a } to the bottom of the JavaScript

9th Jun 2017, 11:58 PM

Jafca

+ 5

I don't think you've called the function anywhere? Either call it in the JavaScript code or add onclick="myFunction()" in the HTML code of all four symbols

9th Jun 2017, 10:09 PM

Maart

+ 5

Ah, yes, I looked over it, my bad. I can't seem to find the problem either...

9th Jun 2017, 10:19 PM

Maart

+ 3

@Jafca is right... Apllying his solution makes your code inside an anonymyzed function, called after Html completely loaded/parsed, because JS tab code in playground is linked as in <head> part of html tab, so <body> content isn't ready to be accessed by JS to reference element (so when you try, you get 'null' result, getting further errors about attempting to access unknow property of 'null' object ;)

10th Jun 2017, 2:22 AM

visph

+ 3

you can also have a look into this code https://code.sololearn.com/W7x7YA5N425F/?ref=app

10th Jun 2017, 2:30 AM

Siddharth Saraf

+ 2

Okay so I just fixed it. I was comparing two different values in the statement where I was checking if the button was checked or not. Earlier it was: if(x[i].checked === "true") { // rest of the code } And Now it is: if(x[i].checked == 1) { // rest of the code } I also tried the window.onload = function() {} suggestion but that just made the variables undefined for some reason. Can anyone explain that?

10th Jun 2017, 1:23 PM

Casey McCray

+ 1

I called it in the JavaScript. line 27.

9th Jun 2017, 10:10 PM

Casey McCray