1483890 - Error in example code

Status: RESOLVED INVALID

(Developer Documentation Graveyard :: Learning Area, enhancement, P1)

Description

[d.carballo]

What feature should be changed? Please provide the URL of the feature if possible.
==================================================================================
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics

I was following the tutorial and I found that the line

var myButton = document.querySelector('button');

throws a null exception in console, and ofc the button is not shown. It's also present in your github example code, and apparently is a common issue.

What problems would this solve?
===============================
Probably quite a lot.

Who would use this?
===================
Everyone.

What would users see?
=====================
Everyone interested in starting with JS.

What would users do? What would happen as a result?
===================================================
The'll copy the code, see it doesn't work, search about it, find it's not an isolated issue and it's exampled on MDN's page. Result? "Yay, I love javascript and mozilla ¬¬"

Is there anything else we should know?
======================================
Translators maybe

Comment 1

[John Whitlock [:jwhitlock]]

The same code is on the English page, the translation appears up to date:

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics#Adding_a_personalized_welcome_message

If an element is not found, document.querySelector returns null. 

Step 1 of that section is "Add a button just before the script element". It seems like the needed change is in index.html.

Comment 2

[Chris Mills [:cmills]]

Hi there,

I have worked through the tutorial again to test it, and it seems to work fine for me.

The line

var myButton = document.querySelector('button');

Would throw a null exception in the console if the button it is supposed to be selecting is not available in HTML.

Did you follow the first step in this section:

https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics#A%C3%B1adiendo_un_mensaje_de_bienvenida_personalizado

That tells you to add a button element to the HTML file?

These parts aren't available in the GitHub code referenced from that because you are supposed to add them as part of the tutorial.

The finished version has all the features needed:

https://github.com/mdn/beginner-html-site-scripted

Does this help, or is there still a problem? Please let me know if I've misunderstood the problem ;-)

Comment 3

[d.carballo]

Hi,

No you didn't misunderstood, that was me, sorry! As you checked and said (I've also checked both codes) everything works fine. Thank you very much.

Comment 4

[Chris Mills [:cmills]]

(In reply to d.carballo from comment #3)
> Hi,
> 
> No you didn't misunderstood, that was me, sorry! As you checked and said
> (I've also checked both codes) everything works fine. Thank you very much.

No worries — glad you got it sorted!