JavaScript getElementByID any short method to do same work? [duplicate]

Question

My below code is working fine, but I want to know, is there any short method of doing same work only by JavaScript?

<lable for="fstValue"></lable> First number is: <input type="text" id="fstValue" value="" /> <lable for="sndValue"></lable> Second number is: <input type="text" id="sndValue" value="" /> <hr> <div id="showResult1"></div> <div id="showResult2"></div> <div id="showResult3"></div> <div id="showResult4"></div> <button onclick="sandeep()">Check Result</button>

// Get the value, calculate and show the value

function sandeep(){ // Define local function - sandeep varriable var a, b, resPlus, resMinus, resMultiple, resDivide; // Get First & Second value a = parseInt(document.getElementById("fstValue").value); b = parseInt(document.getElementById("sndValue").value); // Do calculation resPlus = a + b; resMinus = a - b; resMultiple = a * b; resDivide = a % b; // Show result document.getElementById("showResult1").innerHTML="Plus is " + resPlus; document.getElementById("showResult2").innerHTML="Minus is " + resMinus; document.getElementById("showResult3").innerHTML="Multiple is " + resMultiple; document.getElementById("showResult4").innerHTML="Divide is " + resDivide; }

Oh sure. I guess djechlin has rewritten in a better way.

Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman

2014-09-01 14:55:02 +00:00
Commented Sep 1, 2014 at 14:55 — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Sep 1, 2014 at 14:55
This beloves on code review, flagging for migration

djechlin
– djechlin

2014-09-01 14:55:38 +00:00
Commented Sep 1, 2014 at 14:55 — djechlin
– djechlin, Commented Sep 1, 2014 at 14:55

djechlin · Accepted Answer · 2014-09-01 15:37:47Z

Can certainly array-drive this. Note my sue of parseInt(*, 10), this is important.

var a = parseInt(document.getElementById("fstValue").value, 10); var b = parseInt(document.getElementById("sndValue").value, 10); var texts = ["Plus", "Minus", "Multiple", "Divide"]; var results = [a + b, a - b, a * b, a / b]; for(var i = 0; i < 4; i++ ) { document.getElementById("showResult" + (i+1) + ").innerHTML=" texts[i] + " is " + results[i]; }

Note you're discovering the problem that frameworks like Angular.js and everything else are attempting to solve. Note the following is pseudo code. It sure would be better if you had a snippet of HTML template

<p>{text} is {result}</p>

And you could put this in a loop

{{iterate over results object}} <p>{result.text} is {result.results}</p> {{ end iterate}}

Now far less work has to happen in Javascript. But more importantly, work that should happen in HTML now happens in HTML (data layout), and what happens in JS should happen in JS (getting data). That's the state-of-the-art theory.

One more edit for the pile you already did: there is a missing comma in the results array ;)
Thanks so much for code and advice. I will keep implement this process in my project.
@user1758831 you can thank by upvoting as well. (this is encouraged)

Karmidzhanov · Accepted Answer · 2014-09-01 14:58:09Z

You can make your own functions at least:

function getElement(id) { return document.getElementById(id); }

And now you can use just getElement("showResult1");

Also you can do the same for innerHtml and other stuff that you repeat in your code.

Collectives™ on Stack Overflow

JavaScript getElementByID any short method to do same work? [duplicate]

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related