Требуется помощь функций JavaScript

Kristina Castagnola спросил: 14 ноября 2017 в 06:41 в: javascript

Я практикую JavaScript и придумал небольшой проект ... получаю диаметры различных тел в нашей солнечной системе, когда я нажимаю на соответствующие кнопки.

Я смог сделать это, но не очень эффективно. В настоящее время мой код работает только с 11 функциями. У меня также есть два объекта (один для имен тела, а другой для диаметров тела).

Любые отзывы, чтобы сделать мой код более эффективным, очень приветствуются. Спасибо! : -)

//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>	

0 ответов