Why do JavaScript comments break the React code

Javascript return in functions and event handlers

The call of return results in the function being exited immediately and control being returned to the calling function.

function calculate () {// instructions + ----- + let value = sum (15.85); <----- + | // instructions || } ||| + ---> function sum (x, y) {| let add = x + y; | return add; + ------------ +}

A function can contain several return statements. The Javascript interpreter arrives return, it cancels the execution of the function immediately and returns to calling the function.

function changeElem () {if (! document.getElementById ('fact')) {return; } let elem = document.getElementById ('fact'); // processing}

Javascript doesn't have a void type, so every function must have a return value. The default return value is undefined, the default return value is only for constructors this.

The simple test at the beginning of the script (if (! document.getElementById ('fact'))) prevents the most common error in scripts: access to a non-existent element. If the function does not find an element with the id fact, completed return the function changeElem () immediately and the Javascript interpreter returns control to the calling function.

Return multiple values ​​with return

return can return individual values, objects, booleans and functions. Here the function returns the coordinates of the mouse or finger when hovering with the mouse or during a touch event.

The position of the mouse or finger when touching is a property of the event at which the function is called. Calling eventToXY must therefore also deliver the event.

let touchme = document.getElementById ('touchme'); let xy = document.getElementById ('xy'); mouse event --- + | touchme.onmouseover = function (eve) {xy.innerHTML = 'x' + eventToXY (eve) .x + 'y' + eventToXY (eve) .y; } touch event --- + | touchme.ontouchstart = function (eve) {xy.innerHTML = 'x' + eventToXY (eve) .x + 'y' + eventToXY (eve) .y; } Event --- + | let eventToXY = function (e) {let out = {x: 0, y: 0}; if (e.type === 'touchstart') {let touch = e.originalEvent.touches [0] || e.originalEvent.changedTouches [0]; out.x = touch.pageX; out.y = touch.pageY; } else if (e.type === 'mouseover') {out.x = e.pageX; out.y = e.pageY; } return out; };

Where is return going?

The question of where the return value of a function is sent to is confusing for beginners. The golden rule for return is:

  1. "Normal" functions return the control to the point in the program at which the function was called. If a function returns a value, the value goes to the left side of the statement: let simple = add (x, y);
  2. Event handlers return control to the browser. Each event has a return value that is set to by default true is set.

return in event handlers

Event handlers are Javascript functions that are called when a certain event occurs - e.g. a function checkForm ()that checks the user's input when submitting a form.

Event handlers give by default true back what the browser interprets as "now perform the original action".

The return value from event handlers goes to the browser, which uses the return value to decide whether it should perform the specified function - e.g. sending a form. If the user writes "no" in the input field, the form must not be sent. This is the facial expression for the validation of form entries.

HTML markup

<form id="handleForm" action="formaction" method="post"> <div> Postleitzahl <input type="text" name="plz" id="plz" /> <em id="msg" style="color: red"> </em> </div> <p><input type="submit" value="Absenden" /></p> </form>

Javascript onsubmit

The anonymous function form.onsubmit = function () {} reads the entered value and if the entry is a five-digit number (), calls the function so that the browser transmits the form entries to the server. With all other entries prevents the transmission of the form values.

^ \ d {5.5} $ is a regular expression:

  • Find occurrences of at least 5 and a maximum of 5 digits \ d {5,5}
  • which are at the beginning of the search string ^ Search string
  • and at the end of the search string Search string $

External sources