Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Why is this simple javascript not working?

    Basically, the code that i have is suppose to type things on a div when a button is pressed, but unfortunately, its not doing that.
    I know it will be a obvious mistake and i apologize for that

    If you want to ask me or clarify some things, please do

    Here is my code:
    live demo: http://jsfiddle.net/GsXmG/

    HTML:
    Code:
    <div class="screen" id="screen"></div>
    
    <div class="keyboard">
        <div class="alphabets">
            <div class="first-l">
                <div class="key" onClick="print(this.value);">q</div>
                <div class="key" onClick="print(this.value);">w</div>
                <div class="key" onClick="print(this.value);">e</div>
                <div class="key" onClick="print(this.value);">r</div>
                <div class="key" onClick="print(this.value);">t</div>
                <div class="key" onClick="print(this.value);">y</div>
                <div class="key" onClick="print(this.value);">u</div>
                <div class="key" onClick="print(this.value);">i</div>
                <div class="key" onClick="print(this.value);">o</div>
                <div class="key" onClick="print(this.value);">p</div>
            </div>
            <div class="clear"></div>
            <div class="second-l">
                <div class="key" onClick="print(this.value);">a</div>
                <div class="key" onClick="print(this.value);">s</div>
                <div class="key" onClick="print(this.value);">d</div>
                <div class="key" onClick="print(this.value);">f</div>
                <div class="key" onClick="print(this.value);">g</div>
                <div class="key" onClick="print(this.value);">h</div>
                <div class="key" onClick="print(this.value);">j</div>
                <div class="key" onClick="print(this.value);">k</div>
                <div class="key" onClick="print(this.value);">l</div>
            </div>
            <div class="clear"></div>
            <div class="third-l">
                <div class="key" onClick="print(this.value);">z</div>
                <div class="key" onClick="print(this.value);">x</div>
                <div class="key" onClick="print(this.value);">c</div>
                <div class="key" onClick="print(this.value);">v</div>
                <div class="key" onClick="print(this.value);">b</div>
                <div class="key" onClick="print(this.value);">n</div>
                <div class="key" onClick="print(this.value);">m</div>
            </div>
            <div class="clear"></div>
            <div class="space-bar key"></div>
        </div>
        <div class="numbers">
            <div class="key" onClick="print(this.value);">7</div>
            <div class="key" onClick="print(this.value);">8</div>
            <div class="key" onClick="print(this.value);">9</div>
            <div class="clear"></div>
            <div class="key" onClick="print(this.value);">4</div>
            <div class="key" onClick="print(this.value);">5</div>
            <div class="key" onClick="print(this.value);">6</div>
            <div class="clear"></div>
            <div class="key" onClick="print(this.value);">1</div>
            <div class="key" onClick="print(this.value);">2</div>
            <div class="key" onClick="print(this.value);">3</div>
            <div class="clear"></div>
            <div class="key zero">0</div>
        </div>
    </div>
    CSS:
    Code:
    .screen {
        width:96.6%;
        height: 40px;
        background: #545454;
        border: 10px black solid;
        cursor:default;
        padding:10px;
        font-size: 30px;
        color: white;
        font-family:monospace;
        overflow:hidden;
        white-space: nowrap;
    }
    
    .key {
        width: 34px;
        height: 34px;
        padding: 20px;
        background: #424242;
        border-right: 3px black solid;
        border-left: 3px black solid;
        border-bottom: 5px black solid;
        color: white;
        text-transform:capitalize;
        font-family:sans-serif;
        font-weight:600;
        font-size:30px;
        margin:5px;
        float: left;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
        text-align:center;
        padding-top: 20px;
    }
    
    .key:hover {
        background: #575757;    
    }
    
    .key:active {
        border:none;
        width:39px;
        margin-top: 8px;
    }
    
    
    .space-bar:active {
        width:352px;
    }
    
    .zero:active {
        width:130px
    }
    
    .alphabets {
        float:left;
        width: 900px;
    }
    
    .numbers {
        float:right;
        width: 300px;
    }
    
    .alphabets .second-l{
       margin-left:30px;
    }
    
    .alphabets .third-l{
       margin-left: 60px;
    }
    
    .space-bar {
        width: 346px;
        margin-left: 200px;
        height:30px
    }
    
    .zero {
        width: 124px;
    }
    
    .clear {
        clear:both;
    }
    JS:
    Code:
    function print(key) {
        var screen = document.getElementById('screen').value;
        
        screen.innerHTML += key;
    }
    Last edited by gr8_boi52; 09-09-2013 at 04:11 AM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    divs don't have values, input fields do. if you wanted to use divs you could look at using their innerHTML

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    divs don't have values, input fields do. if you wanted to use divs you could look at using their innerHTML
    How would i do this?
    This is what i did
    Code:
    <div class="key" onClick="print(this.innerHTML);"></div>
    still not working

    this is my JS now
    Code:
    function print(key) {
        var screen = document.getElementById('screen').value;
        var button = key.value;
        screen.innerHTML += button;
    }

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    Strings do not have a value property.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    0
    Thanked 11 Times in 11 Posts
    Just a little bit off in the print() function.
    Try this: http://jsfiddle.net/GsXmG/1/

    ps: I changed the onClicks to this.textContent as well.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    For starters. stop putting all that INLINE javascript in the middle of your <div...> declarations.

    How about this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .screen {
        width:96.6%;
        height: 40px;
        background: #545454;
        border: 10px black solid;
        cursor:default;
        padding:10px;
        font-size: 30px;
        color: white;
        font-family:monospace;
        overflow:hidden;
        white-space: nowrap;
    }
    
    .key {
        width: 34px;
        height: 34px;
        padding: 20px;
        background: #424242;
        border-right: 3px black solid;
        border-left: 3px black solid;
        border-bottom: 5px black solid;
        color: white;
        text-transform:capitalize;
        font-family:sans-serif;
        font-weight:600;
        font-size:30px;
        margin:5px;
        float: left;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
        text-align:center;
        padding-top: 20px;
    }
    
    .key:hover {
        background: #575757;    
    }
    
    .key:active {
        border:none;
        width:39px;
        margin-top: 8px;
    }
    
    
    .space-bar:active {
        width:352px;
    }
    
    .zero:active {
        width:130px
    }
    
    .alphabets {
        float:left;
        width: 900px;
    }
    
    .numbers {
        float:right;
        width: 300px;
    }
    
    .alphabets .second-l{
       margin-left:30px;
    }
    
    .alphabets .third-l{
       margin-left: 60px;
    }
    
    .space-bar {
        width: 346px;
        margin-left: 200px;
        height:30px
    }
    
    .zero {
        width: 124px;
    }
    
    .clear {
        clear:both;
    }
    </style>
    </head>
    <body>
    <div id="screen"></div>
    
    <div class="keyboard">
        <div class="alphabets">
            <div class="first-l">
                <div class="key" >q</div>
                <div class="key" >w</div>
                <div class="key" >e</div>
                <div class="key" >r</div>
                <div class="key" >t</div>
                <div class="key" >y</div>
                <div class="key" >u</div>
                <div class="key" >i</div>
                <div class="key" >o</div>
                <div class="key" >p</div>
            </div>
            <div class="clear"></div>
            <div class="second-l">
                <div class="key" >a</div>
                <div class="key" >s</div>
                <div class="key" >d</div>
                <div class="key" >f</div>
                <div class="key" >g</div>
                <div class="key" >h</div>
                <div class="key" >j</div>
                <div class="key" >k</div>
                <div class="key" >l</div>
            </div>
            <div class="clear"></div>
            <div class="third-l">
                <div class="key" >z</div>
                <div class="key" >x</div>
                <div class="key" >c</div>
                <div class="key" >v</div>
                <div class="key" >b</div>
                <div class="key" >n</div>
                <div class="key" >m</div>
            </div>
            <div class="clear"></div>
            <div class="space-bar key"> </div>
        </div>
        <div class="numbers">
            <div class="key" >7</div>
            <div class="key" >8</div>
            <div class="key" >9</div>
            <div class="clear"></div>
            <div class="key" >4</div>
            <div class="key" >5</div>
            <div class="key" >6</div>
            <div class="clear"></div>
            <div class="key" >1</div>
            <div class="key" >2</div>
            <div class="key" >3</div>
            <div class="clear"></div>
            <div class="key zero">0</div>
        </div>
    </div>
    
    <script type="text/javascript">
    var thescreen = document.getElementById('screen');
    var keys = document.getElementsByClassName("key");
    for ( var k = 0; k < keys.length; ++k )
    {
        keys[k].onclick = show;
    }
    function show( )
    {
        thescreen.innerHTML += this.innerHTML;
    }
    </script>
    </body>
    </html>
    Note that your space bar key needs to actually have a space in it for the above to work. But then it does.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    gr8_boi52 (09-09-2013)

  • #7
    New Coder
    Join Date
    Apr 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by joesimmons View Post

    ps: I changed the onClicks to this.textContent as well.
    Awesome Works good.. Thank you


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •