[ANSWERED] javascript – Variable is null and ReferenceError with assigned variables

Question 1

There is an issue in your code, because you are having the value of the text selected once and it will never be triggered again, just add the variables declaration inside the function,

few things to note:

your code didn’t select the input element value
I used .split() function which return an array then you can reverse it.

here is a working snippet:

let paragraph = document.querySelector("#paragraph");
function check() {
  let word = document.querySelector("#word").value;
  let wordReversed = word.split('').reverse().join("");
  if (word === wordReversed) {
    paragraph.innerHTML = `${word} is a palindrome.`;
  } else {
    paragraph.innerHTML = `${word} isn't a palindrome.`;
  }
}

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->
    <div id="formulary">
      <form>
        <header>
          <h1>Is it a palindrome?</h1>
        </header>
        <label for="word">
          Word:
          <input type="text" id="word" placeholder="Enter the word here..." />
        </label>
        <button type="button" onclick="check()">Check</button>
        <div>
          <p id="paragraph">And the answer is:</p>
        </div>
      </form>
    </div>
    <script src="index.js" async defer></script>
  </body>
</html>

Question 2

The function document.querySelector("word") is returning the DOM element.

You need to call .value to get the input value.
Moreover, you select it by ID so you should append # before.

let word = document.querySelector("#word").value;

Question 3

I’m trying to create a basic website that checks whether a certain word is a palindrome or not. But, even though I assigned a value to my variable word, the Firefox console says it’s null.
With wordReversed, it says ReferenceError: can’t access lexical declaration wordReversed before initialization, even though I assigned a value to it and both variables are global. What’s wrong in my code?

HTML5 code:

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->
    <div id="formulary">
      <form>
        <header>
          <h1>Is it a palindrome?</h1>
        </header>
        <label for="word">
          Word:
          <input type="text" id="word" placeholder="Enter the word here..." />
        </label>
        <button type="button" onclick="check()">Check</button>
        <div>
          <p id="paragraph">And the answer is:</p>
        </div>
      </form>
    </div>
    <script src="index.js" async defer></script>
  </body>
</html>

JS code:

let word = document.querySelector("word");
let wordReversed = [...word].reverse().join("");
let paragraph = document.querySelector("#paragraph");

function check() {
  if (word === wordReversed) {
    paragraph.innerHTML = `${word} is a palindrome.`;
  } else {
    paragraph.innerHTML = `${word} isn't a palindrome.`;
  }
}

Bollate

[ANSWERED] javascript – Variable is null and ReferenceError with assigned variables

By

Solution 1 :

Solution 2 :

Problem :

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate