How show values using JavaScript?

Question

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 ?

How does your code look like currently? What difficulties are you encountering? What have you tried so far? If you are new to javascript what tutorials/articles/books did you read so far in order to get started? — Darin Dimitrov
– Darin Dimitrov, Commented Dec 14, 2011 at 13:44
As you're new to JS, here are a few questions: What does your HTML look like? Do you want the word to change when the input field value changes? Or when (inside of the input field) a keyboard key is pressed? Or released? Or when the field loses focus? Or ...? (This will determine which event to use...) — Martin Hennings
– Martin Hennings, Commented Dec 14, 2011 at 13:46
@DarinDimitrov I update my post, sorry about the lack of information. — Valter Silva
– Valter Silva, Commented Dec 14, 2011 at 13:56

score 1 · Accepted Answer · 2011-12-14 15:35:09Z

1

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" />

edited Dec 14, 2011 at 15:35

answered Dec 14, 2011 at 13:50

user898741

Sign up to request clarification or add additional context in comments.

11 Comments

bigblind Over a year ago

although this answer is technically correct, you're adding javascript code inside your markup. If you declare the handlers inside your javascript code, the content and behaviour are separated. This is called unobtrusive javascript.

user898741 Over a year ago

@FrederikCreemers I tried to post an simple answer so he can understand easily.

bigblind Over a year ago

although your answer is indeed simpler, teaching people the best practices from the beginning, makes for a better programmer in the end. No offense to your answer btw, it's technically correct.

user898741 Over a year ago

@FrederikCreemers thank you, just triyng to pass my little knowledge.

Valter Silva Over a year ago

@Márcio I'm trying to follow your suggestion but is not working, could you please see my code in the post, I updated it.

|

bigblind · Accepted Answer · 2011-12-14 13:52:22Z

1

You need to add an onChange handler to your input field, this can be done in many ways. for example, let's say your input has an id of #toggler, and the element where either on or off needs to be shown has an id of #onoff

toggler = document.getElementById('toggler');
onoff = document.getElementById('onoff');
toggler.onChange = function(e){
    onoff.innerHTML = (toggler.value==1)? 'on' : 'off';
}

answered Dec 14, 2011 at 13:52

bigblind

12.9k14 gold badges72 silver badges132 bronze badges

6 Comments

katspaugh Over a year ago

Lookup vs conditional: onoff.innerHTML = [ 'off', 'on'][toggler.value]

bigblind Over a year ago

@Jørgen Thx for the +1, but to make it really unobtrusive, I'd have to put that inside a self executing function, but that'd be outside the scope of this answer. No pun intende :p

Jørgen Over a year ago

You're right, both about you solution needing modification and the subject being outside the scope :) Nevertheless, it's a lot better than using element attributes.

bigblind Over a year ago

Aftere reading the added code in the question, I noticed that what the toggler.value will receive is a string. Therefore, the condition should become (toggler.value==="1"). This condition is more precise because it uses the === operator, which does a more strict comparison. In the case mentioned by @katspaugh, you'd have to convert the value to an int, so that code would look like this: `onoff.value = ['on','off'][Number(toggler.value)]

katspaugh Over a year ago

Frederik Creemers, quite the opposite. Object property names are strings. When you iterate over an array (for (var i = 0; i < x; i++) {}), index coerces from number to string.

|

Collectives™ on Stack Overflow

How show values using JavaScript?

2 Answers 2

11 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related