Display the changed value using "if" that was written in the textbox

Question

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="Username" />
    <input type="button" id="tutorial" value="Click" onclick="repeatvalue()" />
    <hr />
    <label id="label"></label>
    <script>
        function repeatvalue() {
            var txtName = document.getElementById("Username");
            var lblName = document.getElementById("label");


            if (label = "BE20R") {
                result = '5layer';
            } else {
                result = '3layer';
            }
            lblName.innerHTML = result;
        }
    </script>
</body>

</html>

This is just my first steps in JS, so I want to ask for help. What I want is that depending on what value I put in the textbox, JS will show the converted value. For example, if I enter "BE20R" I want it to show me "5layers", if I enter another value - "3layers".

When you are trying to compare two things to make sure they are equals, you will want to use two equal signs (==) or three(===). However, using one sets the value. So your of statement will need == and not =. Also you will need to use txtName.value and not the word label — imvain2, Aug 10 '23 at 16:03

Eren · Answer 1 · 2023-08-10T16:12:58.490

you need to use == (or ===) to check if its equal, one = sets it
you need to do inputelement.value to get the users input
you dont need to but you should define result before assigning it

function repeatvalue() {
    let txtName = document.getElementById("Username");
    let lblName = document.getElementById("label");
    var result;


    if (txtName.value == "BE20R") {
        result = '5layer';
    } else {
        result = '3layer';
    }
    lblName.innerHTML = result;
}

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <input type="text" id="Username" />
      <input type="button" id="tutorial" value="Click" onclick="repeatvalue()" />
      <hr />
      <label id="label"></label>
  </body>
</html>

Accessing elements by using populated element IDs is **not a good approach**. Instead use the OP's variable `txtName`, please. — MfyDev, Aug 10 '23 at 16:10

Harrison · Answer 2 · 2023-08-10T16:09:31.277

You're very close with this method. Just a little typo, see the Snippet below.

You want to evaluate the value of the input (txtName)
And evaluating the equivalency values is done with "===" in JavaScript (you can use "==" but "===" is stricter, MDN Docs and Stack Question discussing the differences)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="Username" />
  <input type="button" id="tutorial" value="Click" onclick="repeatvalue()" />
  <hr />
  <label id="label"></label>
  <script>
    function repeatvalue() {
      var txtName = document.getElementById("Username");
      var lblName = document.getElementById("label");


      if (txtName.value === "BE20R") {
        result = '5layer';
      } else {
        result = '3layer';
      }
      lblName.innerHTML = result;
    }
  </script>
</body>

</html>

There are other methods, such as Event Listeners, see below:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="Username" />
  <hr />
  <label id="label"></label>
  <script>
    var txtName = document.getElementById("Username");
    var lblName = document.getElementById("label");

    function repeatvalue(e) {
      if (e.target.value === "BE20R") {
        result = '5layer';
      } else {
        result = '3layer';
      }
      lblName.innerHTML = result;
    }
    txtName.addEventListener("change", repeatvalue)
  </script>
</body>

</html>

Please use MDN ([Events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events), [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)), _not_ W3Schools. — Darryl Noakes, Aug 10 '23 at 16:08

Display the changed value using "if" that was written in the textbox

2 Answers2