Search code examples
javascripthtmltextinputreal-time

get text from input and print it in a div in real time html


i'm trying to get the text from an input in my html code and print the value of this input in a div and i want to do this in a real time so i tried with this javascript function

<input id="fname" onkeyup="getVal()" type="text" name="filter_name" value="Nom" onclick="this.value = &#39;&#39;;" onkeydown="this.style.color = &#39;#000000&#39; " style="width:180px;" >

<div id="icard" class="drag" style="left: 0px; top: 0px; width:10%;  height:10%;">  item</div>

this is js function :

function getVal()
    {
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
    document.getElementById("icard").update("New text");
    document.getElementById("icard")=x;
    var s =document.getElementById("icard");
    s.value=x.value;
    }

Solution

  • value attribute is not associated with div. So you have to use innerHTML for div

    function getVal() {
        var x = document.getElementById("fname");
        document.getElementById("icard").innerHTML = x.value.toUpperCase();
    }
    

    Check this JSFiddle