I'm practicing JavaScript and have come up with a little project ... get the diameters of various bodies in our solar system when I click on corresponding buttons.
I've been able to do this, but not very efficiently. Currently, the only way my code works is with 11 functions. I also have two objects (one for the body names and the other for the body diameters).
Any feedback to make my code more efficient is very welcome. Thank you! :-)
//JavaScript
var bodyName = {
su:"the Sun",
me:"Mercury",
ve:"Venus",
ea:"Earth",
mo:"the Moon",
ma:"Mars",
ju:"Jupiter",
sa:"Saturn",
ur:"Uranus",
ne:"Neptune",
pl:"Pluto"
};
var bodyDiam = {
su:864576,
me:3032,
ve:7521,
ea:7918,
mo:2159,
ma:4212,
ju:86881,
sa:72367,
ur:31518,
ne:30599,
pl:1475
};
function suInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.su;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.su;
}
function meInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.me;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.me;
}
function veInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ve;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ve;
}
function eaInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ea;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ea;
}
function moInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.mo;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.mo;
}
function maInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ma;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ma;
}
function juInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ju;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ju;
}
function saInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.sa;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.sa;
}
function urInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ur;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ur;
}
function neInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.ne;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ne;
}
function plInfo() {
document.getElementById("bodyNameDisplay").innerHTML = bodyName.pl;
document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.pl;
}
<!--CSS-->
p {
font-family: arial, sans-serif;
font-size: 1em;
}
.button {
font-size: 1em;
font-weight: bold;
color: #fff;
border: none;
border-radius: 0;
padding: 0.5em;
margin: 0 0.25em 0.5em 0;
background-color: #393;
}
.result {
font-weight: bold;
color: #e80;
}
<!--html-->
<!--buttons-->
<button type="button" class="button" id="suButton" onclick="suInfo()">Sun</button>
<button type="button" class="button" id="meButton" onclick="meInfo()">Mercury</button>
<button type="button" class="button" id="veButton" onclick="veInfo()">Venus</button>
<button type="button" class="button" id="eaButton" onclick="eaInfo()">Earth</button>
<button type="button" class="button" id="moButton" onclick="moInfo()">Moon</button>
<button type="button" class="button" id="maButton" onclick="maInfo()">Mars</button>
<button type="button" class="button" id="juButton" onclick="juInfo()">Jupiter</button>
<button type="button" class="button" id="saButton" onclick="saInfo()">Saturn</button>
<button type="button" class="button" id="urButton" onclick="urInfo()">Uranus</button>
<button type="button" class="button" id="neButton" onclick="neInfo()">Neptune</button>
<button type="button" class="button" id="plButton" onclick="plInfo()">Pluto</button>
<!--Information Display-->
<p>The diameter of <span class="result" id="bodyNameDisplay">this body</span> is <span class="result" id="bodyDiamDisplay">this many</span> miles.</p>