JavaScript code breaks when I use a variable

[noweare]

Using a webpage to control leds connected to a microcontroller. Just using a variable to
substitute for document.getElementById('ID_LED_0')

EDIT: Also get err in console: DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

this works:

<scipt>
document.getElementById('ID_LED_0').addEventListener('click', led_changed);
document.getElementById('ID_LED_1').addEventListener('click', led_changed);
document.getElementById('ID_LED_2').addEventListener('click', led_changed);

function led_changed() {
    if(document.getElementById('ID_LED_1').checked == true) {
      l_LED_selected = 1;
    console.log(l_LED_selected);
    var msg = { type: 'LED_selected', value: l_LED_selected};
    Socket.send(JSON.stringify(msg));
}
</script>

But this doesn't

<script>
var led_1=document.getElementById('ID_LED_1');
led_1.addEventListener('click', led_changed);

function led_changed() {
    if(led_1.checked == true) {
      l_LED_selected = 1;
    console.log(l_LED_selected);
    var msg = { type: 'LED_selected', value: l_LED_selected};
    Socket.send(JSON.stringify(msg));
  } //EDIT WAS NOT PRESENT IN ORIGINAL POST 
}
</script>

 

[EkBass]

I think you are missing at least one closing bracket there.
A bracket that looks like is closing the function, is actually closing the IF statement. Function is not closed in your code at all.

Make sure also, that you have declared properly whatever you are using in line l_LED_selected = 1;

 

[noweare]

I think you are missing at least one closing bracket there.
A bracket that looks like is closing the function, is actually closing the IF statement. Function is not closed in your code at all.

Make sure also, that you have declared properly whatever you are using in line l_LED_selected = 1;

Hello EkBass,
Thanks for responding. I missed the close bracket in the post but it is in the code. Just found out that when the code does not work I get the
"dev tools missing ..." msg in the console. When I change my code to what works that msg doesn't show up.

 

[EkBass]

6:5 error Parsing error: Unexpected token 4 | 5 | function led_changed() { > 6 | if(led_1.checked == true) { | ^ 7 | l_LED_selected = 1; 8 | console.log(l_LED_selected); 9 | var msg = { type: 'LED_selected', value: l_LED_selected};

ValidateJavaScript - Online Tool to Find & Fix JavaScript & JSX Errors

ValidateJavaScript is an online validating (or linting) tool that will automatically find basic errors and help prevent potentially destructive bugs in JavaScript & JSX (React.js) code.

validatejavascript.com

 

[noweare]

Thank you. This looks like it will be helpful, just started with javascript, html, css.

 

[Deleted member 2829]

I think you are missing at least one closing bracket there.
A bracket that looks like is closing the function, is actually closing the IF statement. Function is not closed in your code at all.

And this is why I keep urging everybody to use Allman indentation style. The notion of not having brackets line up is IMO one of the worst ideas in programming history. If you use this style religiously your chances of silly errors like this will decrease dramatically.

 

[Deleted member 2829]

this works:

<scipt>
document.getElementById('ID_LED_0').addEventListener('click', led_changed);
document.getElementById('ID_LED_1').addEventListener('click', led_changed);
document.getElementById('ID_LED_2').addEventListener('click', led_changed);

function led_changed() {
    if(document.getElementById('ID_LED_1').checked == true) {
      l_LED_selected = 1;
    console.log(l_LED_selected);
    var msg = { type: 'LED_selected', value: l_LED_selected};
    Socket.send(JSON.stringify(msg));
}
</script>

I would be very surprised if this works, seeing as you start off with a typo 😮
Always be very careful in typing and spelling, especially when writing HTML, CSS, or JS as there is no compiler to warn you.

 

[noweare]

LIke I said, I missed the bracket when I posted (cut & paste).

Yes, I am finding out that my spelling needs more scrutiny. Normally I am writing C in a dev environment that catches these things and as you can see I have become lax with my spelling.

Turns out the problem was not the code but I had to reload the page (sometimes) twice or close the page and type in the url to reload correctly. Kind of glitchy but I am working with a microcontroller serving a webpage.

I am just learning html, css and js. There seems to be many different ways to do a thing, which makes it confusing to me. Like I learned about 6 ways to to
do one thing rather than learning 6 things.

 

[Deleted member 2829]

Yes there are always different ways to do things. The way that is easiest to understand is always the best - even if that may need a little more coding. E.g. I often prefer writing a few simple lines over using some power function whose myriad options I can never remember.