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

Giedriusadbaras
August 10, 2023
209 views
4 votes
4 Answers

<!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".

Tags: javascript

Answers

- ScriptHost
- August 10, 2023 at 6:03 pm
- 0 votes
0
I have added a variable called result to store the converted value.
I have added an if statement to check if the value of the input box is equal to "BE20R". If it is, then the value of result is set to "5layer". Otherwise, the value of result is set to "3layer".
I have updated the innerHTML property of the label to set it to the value of result.
This code will now show the converted value depending on what is entered in the input box. For example, if you enter "BE20R", the label will show "5layer". If you enter another value, the label will show "3layer".
```
<!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");
            var result;

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

</html>
```
Login or Signup to reply.

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>

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>

<!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");

            var inputValue = txtName.value;
            var result;

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

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers