Change content on Onchange event in Javascript

Question

I just started working in Javascript. I have implemented onchange event in JS through code:

    <html>
    <head>
    <script>
    function fun()
    {
        var x=document.getElementById("price1");
        document.forms['forms1'].price.value=x.value*2;
    }
    </script>
    </head>
    <body>
    <form name="forms1">
    Enter Price: <input type="text" id="price1" onchange="fun()">   
    value is: <input name="price" type="text" >
    </form>
    </body>
    </html>

But problem is that I get output like

value is: |__|

but I want it like a paragraph without input tag (i.e not in a box). I want it to be changed like a text. e.g value is: 20 not value is:|___20___|. Any help?

Either set the innerHTML of a p tag or remove the borders from your input with CSS. — Evan Davis
– Evan Davis, Commented Apr 15, 2013 at 17:57

Gabriele Petrioli · Accepted Answer · 2013-04-15 18:01:05Z

2

One way would be to style the input box

<input name="price" type="text" class="text" disabled />

and

.text{
    border:0;
    background-color:transparent;
    color:black;
}

demo at http://jsfiddle.net/gaby/ttpFa/

the other would be to use a span to hold the price instead of an input element.

<form name="forms1">
    Enter Price: <input type="text" id="price1" onchange="fun()"/>   
    value is: <span id="price"></span>
</form>

and

function fun()
{
    var x=document.getElementById("price1");
    document.getElementById('price').innerHTML=x.value*2;
}

demo at http://jsfiddle.net/gaby/ttpFa/1/

answered Apr 15, 2013 at 18:01

Gabriele Petrioli

197k35 gold badges276 silver badges331 bronze badges

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

Comments

KingKongFrog · Accepted Answer · 2013-04-15 18:03:27Z

1

http://jsbin.com/utipob/1/

Use span:

value is: <span id="price"></span>

and change JS to:

    function fun()
    {
        var x=document.getElementById("price1").value;
        document.getElementById('price').innerHTML=x*2;    
    }

edited Apr 15, 2013 at 18:03

answered Apr 15, 2013 at 17:58

KingKongFrog

14.5k22 gold badges78 silver badges135 bronze badges

Collectives™ on Stack Overflow

Change content on Onchange event in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related