CODEWITHSUNDEEP
javascripthtmlinnerhtml
Jebediah Robisch
Jebediah Robisch

Reputation: 23

Having troubles getting innerHTML to work properly

I'm trying to write code to display the speed at which a paddle currently moves (making a little game, shift and control change the speed) and I've been playing around with the code to change some text. The console isn't throwing errors, syntax validators say it's fine, and I don't see the issue, but the text just won't change. Here's the offending code:

var speedmod = 0;
$(document).keydown(function(keyPressed){
    if (keyPressed.keyCode == 16){
        speedmod -= 5;
        if (speedmod < -70){
            speedmod = -70;
        }
    }
    if (keyPressed.keyCode == 17){
        speedmod += 5;
        if (speedmod > 125){
            speedmod = 125;
        }
    }
    var displaypaddx = (75 + speedmod).toString(10) + 'px';
    var sdisplay = document.getElementById('pmspeed');
    console.log(displaypaddx);
    sdisplay.innerHtml = displaypaddx;
});

(This isn't all of the code, just the stuff affecting the display)

Edit: Forgot to mention, the script is loaded after the span (with the id of pmspeed) is loaded.

Upvotes: -1

Views: 59

Answers (1)

DigitalJedi
DigitalJedi

Reputation: 1651

It should be innerHTML instead of innerHtml like so:

var speedmod = 0;
$(document).keydown(function(keyPressed){
    if (keyPressed.keyCode == 16){ // shift
        speedmod -= 5;
        if (speedmod < -70){
            speedmod = -70;
        }
    }
    if (keyPressed.keyCode == 17){ // ctrl
        speedmod += 5;
        if (speedmod > 125){
            speedmod = 125;
        }
    }
    var displaypaddx = (75 + speedmod).toString(10) + 'px';
    var sdisplay = document.getElementById('pmspeed');
    console.log(displaypaddx);
    sdisplay.innerHTML = displaypaddx;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="pmspeed">
</div>
</body>

Upvotes: 0

Related Questions