-1

So I'm new to JavaScript and I just wrote a simple program; however, I'm not sure why it isn't working. I have shown both the HTML and the Javascript code below.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Rectangular Prism Calculator</h1>
        <h2 id="hLength">Length: N/A</h2>
        <h2 id="hWidth">Width: N/A</h2>
        <h2 id="hDepth">Depth: N/A</h2>
        <h2 id="hSurfaceArea">Surface Area: N/A</h2>
        <h2 id="hVolume">Volume: N/A</h2>
        <script src="main.js"></script>
    </body>
</html>

JavaScript:

var length;
var width;
var depth;

length = 20;
width = 10;
depth = 15;

// Write length to document
var wLength = document.getElementbyId('hLength');
wLength.textContent = "Length: " + length;

// Write width to document
var wWidth = document.getElementbyId('hWidth');
wWidth.textContent = "Width: " + width;

// Write depth to document
var wDepth = document.getElementbyId('hDepth');
wDepth.textContent = "Depth: " + depth;

// Calculate surface area
var calculateSurfaceArea = function(l, w, d) {
    var surfaceArea = 2*l*d + 2*l*w + 2*w*d;
    return surfaceArea;
}

// Write surface area to document
var wSurfaceArea = document.getElementById('hSurfaceArea');
wSurfaceArea.textContent = "Surface Area: " + calculateSurfaceArea(length, width, depth);

// Calculate volume
var calculateVolume = function(l, w, d) {
    var volume = l*w*d;
    return volume;
}

// Write volume to document
var wVolume = document.getElementById('hVolume');
wVolume.textContent = "Volume: " + calculateVolume(length, width, depth);

Just to verify, I have made sure that the name of the HTML document is 'index.html' and the JavaScript document is named 'main.js'

Many Thanks, Malleekk

Michael Malek
  • 41
  • 4

2 Answers2

4

You have a typo in your code:

getElementbyId

should be:

getElementById

Working Demo of your corrected code

You should learn how to debug your Javascript code. Get along with Firebug in Firefox / Developer Tools in Chrome.

Community
  • 1
  • 1
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • 1
    @NiettheDarkAbsol wat, it's a correct awnser isn't it? – Azrael Oct 01 '14 at 11:47
  • 1
    And is there a downvote reason for that? People are trying to help and you're punishing them instead the OP... I just can't see any logic there. +1 for both answers from me. – Shomz Oct 01 '14 at 11:47
  • @Azrael Yes. But it is not useful to the community. The tooltip for the "downvote" button reads "This answer is not useful". So I clicked it. – Niet the Dark Absol Oct 01 '14 at 11:47
  • 1
    And I say your downvotes "are not useful" and I wish there's a button I can click to reset your rep. – Shomz Oct 01 '14 at 11:48
  • @NiettheDarkAbsol OP said "Cheers, it worked" in that case I guess this awnser is useful isn't it? – Azrael Oct 01 '14 at 11:49
  • 2
    @NiettheDarkAbsol The meaning of "not usefull" is in context to the question, not "not usefull to the community". That answer is definitly usefull for the question. The most usefull thing would have been if you had the question flagged correctly.. – Zim84 Oct 01 '14 at 11:50
  • @Azrael While it may have satisfied the needs of the one, it does nothing useful for the needs of the many. Now, if the answer had explained how to debug an application (specifically looking at the console and seeing "getElementbyId is not a function"), then it *might* be a useful answer. – Niet the Dark Absol Oct 01 '14 at 11:50
  • 2
    The question can be resolved with a few words in a comment, it has no value in the future for anyone else. (http://meta.stackoverflow.com/questions/260104/dissuade-answers-to-simple-typos) – Alex K. Oct 01 '14 at 11:50
  • And his downvotes on people who help **HAVE** some value for someone? He couldn't just say it in the comment, like you're suggesting people who answered should do it?? – Shomz Oct 01 '14 at 11:52
  • @NiettheDarkAbsol I agree with you on your last comment. I have updated my answer. – Rahul Desai Oct 01 '14 at 11:54
  • What's there to argue? I'd also downvote. If the problem in my code is a typo, I delete the question as soon as I figure it out. And if it's someone else's code, I'd comment to point out the typo. What's there to learn from this question/answer for the future visitors? Nothing. – akinuri Oct 01 '14 at 11:59
  • 1
    @akinuri But why downvote the answers? That's my point. Downvote the question, close it, tell OP to delete it, but no reason to be an asshole and downvote people trying to help. – Shomz Oct 01 '14 at 12:00
  • I have flagged it. You guys may go ahead. @NiettheDarkAbsol I would appreciate if you remove your downvote. I believe this question will be closed eventually. – Rahul Desai Oct 01 '14 at 12:03
2

Javascript is case sensitive and usually the names of functions has camel case style, so this is wrong:

... document.getElementbyId ...

Replace with

... document.getElementById ...
Marco Mercuri
  • 1,117
  • 9
  • 17