This week we had guest speakers. On Monday, the speaker covered the work environment for a developer (writing code for the web). Tuesday and Wednesday the speakers covered features of es6 (a 2015 update of JavaScript). Thursday the speaker covered debugging JavaScript code.

This week, a particular challenge I had was to place the code for an input box in the html file (and thus on the web page), capture the value entered into it on the web page, and transfer that value into JavaScript for processing. I spent hours (literally) searching the web for a procedure that would do it. I would follow the instructions and get error messages. I would repeatedly see comments saying “just do this” or “this would do it,” but they didn’t work, and the meaning was not clear to me. After numerous failures, I finally tried some simple input and capture code, as best as I could understand it. With the help of a classmate, Hunter Hawes, I finally got it working.

Here’s the process in brief:

In the html file, the following code places an input box with a submit button next to it on the web page. After the user enters data in that box and the user clicks on the submit button, the data is placed in the variable “number” and the function GuessNumber in the JavaScript file is called and run:

<form>
Enter number: <input type=”text” name=”number”>
<input type=”button” onClick=”GuessNumber()” value=”Submit”>
</form>

..which shows on the web page as:

In the JavaScript file, document.querySelector puts the value entered in the box on the web page (stored in the variable “number” from “input’) into the variable mybutton:

var mybutton = document.querySelector(“input”).value

..and one can proceed from there. Why this concept was nowhere explained in clear and concise language in the sites I visited is a mystery to me. I’m finding a lot of the coding documentation on the web is not well-written or clearly explained. It appears that a number of contributors may be proficient at writing code, but less proficient in writing explanatory prose. This can become a problem when researching information.

P.S. A direct, one-line JavaScript capture code does exist:

var guess = prompt(“Input number between 1 and 100”);

where guess captures the data entered into a pop-up box on the web page which is labeled “Input number between 1 and 100.” However, most users prefer to avoid a pop-up box, and there are other disadvantages as well. It will get the job done, but may not be the most efficient way to gather information on a web page.