CODEWITHSUNDEEP
htmlonclickkeyboardtextfield
Kier Illingworth
Kier Illingworth

Reputation: 37

Onclick add value to textfield?

I'm trying to code an onscreen keyboard but can't see why the keys when clicked do not insert the values, instead nothing happens. Sorry if this is a obvious problem, I am trying to learn.

        <tr>
                <td colspan="3"> <B>Search</B>
                    <div id="keyboard">


<br>
<input id="searchbox" type="text">
<br>
    <input id="qkey" type="button" value="q" onClick="document.getElementById("searchbox").value+='q';"/>
    <input id="wkey" type="button" value="w" onClick="document.getElementById("searchbox").value+='w';"/>
    <input id="ekey" type="button" value="e" onClick="document.getElementById("searchbox").value+='e';"/>
    <input id="rkey" type="button" value="r" onClick="document.getElementById("searchbox").value+='r';"/>
    <input id="tkey" type="button" value="t" onClick="document.getElementById("searchbox").value+='t';"/>
    <input id="ykey" type="button" value="y" onClick="document.getElementById("searchbox").value+='y';"/>
    <input id="ukey" type="button" value="u" onClick="document.getElementById("searchbox").value+='u';"/>
    <input id="ikey" type="button" value="i" onClick="document.getElementById("searchbox").value+='i';"/>
    <input id="okey" type="button" value="o" onClick="document.getElementById("searchbox").value+='o';"/>
    <input id="pkey" type="button" value="p" onClick="document.getElementById("searchbox").value+='p';"/>
    <input id="backkey" type="button" value="Bckspc" onclick='bckspc'>
    <br>
    <input id="akey" type="button" value="a" onClick="document.getElementById("searchbox").value+='a';"/>
    <input id="skey" type="button" value="s" onClick="document.getElementById("searchbox").value+='s';"/>
    <input id="dkey" type="button" value="d" onClick="document.getElementById("searchbox").value+='d';"/>
    <input id="fkey" type="button" value="f" onClick="document.getElementById("searchbox").value+='f';"/>
    <input id="gkey" type="button" value="g" onClick="document.getElementById("searchbox").value+='g';"/>
    <input id="hkey" type="button" value="h" onClick="document.getElementById("searchbox").value+='h';"/>
    <input id="jkey" type="button" value="j" onClick="document.getElementById("searchbox").value+='j';"/>
    <input id="kkey" type="button" value="k" onClick="document.getElementById("searchbox").value+='k';"/>
    <input id="lkey" type="button" value="l" onClick="document.getElementById("searchbox").value+='l';"/>
    <br>
    <input id="zkey" type="button" value="z" onClick="document.getElementById("searchbox").value+='z';"/>
    <input id="xkey" type="button" value="x" onClick="document.getElementById("searchbox").value+='x';"/>
    <input id="ckey" type="button" value="c" onClick="document.getElementById("searchbox").value+='c';"/>
    <input id="vkey" type="button" value="v" onClick="document.getElementById("searchbox").value+='v';"/>
    <input id="bkey" type="button" value="b" onClick="document.getElementById("searchbox").value+='b';"/>
    <input id="nkey" type="button" value="n" onClick="document.getElementById("searchbox").value+='n';"/>
    <input id="mkey" type="button" value="m" onClick="document.getElementById("searchbox").value+='m';"/>
    <br>
    <input id="spacekey" type="button" value="                  space                  " onClick="document.getElementById("searchbox").value+=' ';"/>
            </center>
            </div>
        </tr>

Upvotes: 0

Views: 128

Answers (2)

Daniel Vel&#225;zquez
Daniel Vel&#225;zquez

Reputation: 51

Use simple quotes, i.e. 'searchbox' in place of "searchbox". You are specifying a quoted text in another quoted text, thus you need either to use different quotes or use escaping (like \")

Upvotes: 1

timdewolf
timdewolf

Reputation: 121

You've used the wrong quotation marks in the onclick. Instead, use

<input id="qkey" type="button" value="q" onClick="document.getElementById('searchbox').value+='q';"/>

Upvotes: 1

Related Questions