Home/ Questions/Q 6949399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:56:57+00:00

I am new with JavaScript, I have a value in an input field, like

  • 0

I am new with JavaScript, I have a value in an input field, like 0 or 1 and then when this value changes a word is changed to ‘Off’ or ‘On’ respectively.

I know this is pretty simple but I’m new with JavaScript as I said.

How does your code look like currently?
What have you tried so far?

EDIT
I’m working in the code right now so nothing great so far:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function change(value) {
        if (value == 1)
            return "ON";
        else
            return "OFF";
    }
</script>

</head>
<body>

    <input type="text" value="1" />
    <p>ON OR OFF RIGHT HERE</p>

</body>
</html>

What difficulties are you encountering?

I need this values keep been updating all the time, if the value of the input field change the word must change either.

If you are new to javascript what tutorials/articles/books did you read so far in order to get started?

Not a specific tutorial right now, I’m googling.

EDIT 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function change(){
        toggler = document.getElementById('toggler');
        onoff = document.getElementById('onoff');
        toggler.onChange = function(e){
            onoff.innerHTML = (toggler.value==1)? 'on' : 'off';
        }
    }
</script>

</head>
<body>

    <input type="text" id="toggler" value="1" onkeyup="change()" />
    <div id="onoff"></div>

</body>
</html>

I’m trying to following the suggestions but still not working, what am I doing wrong here guys ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t posted any code but here it goes some general code:

    Your input:

    <input type='text' id='myinput' onkeyup='contentChanged(this)' />

    Look for other key events: http://unixpapa.com/js/key.html

    Then, your function:

    function contentChanged(myinput)
{
    var myvalue = myinput.value;

    if (myvalue == "1")
    {
        // Do something with value = 1
    }
    else if (myvalue == "0")
    {
        // Do something with value = 0
    }
    // And so on...
}

    EDIT:

    Now that you’ve posted your code, you can do like as I said:

    <input type="text" value="1" onkeyup="change(this.value)" />

    EDIT 2:

    You’re setting two events to your object and onChange just works to select object. Because of this I suggested you to use onkeyup or another key event. Just remove your onChange event out of your function.

    Change to this and try:

    function change(){
    toggler = document.getElementById('toggler');
    onoff = document.getElementById('onoff');
    onoff.value = (Number(toggler.value)==1)? 'on' : 'off';
}

    Number function is important to cast your input data and be sure that is a number.
    Plus add an maxlength attribute on your textfield to limit user input data:

    <input type="text" id="toggler" value="1" onkeyup="change()" maxlength="1" />
    • 0