Question

我正在练习JavaScript，并提出了一个小项目...当我点击相应的按钮时，获取太阳系中各种物体的直径。

我已经能够做到这一点，但效率不高。目前，我的代码工作的唯一方式是11个函数。我也有两个物体（一个用于身体名称，另一个用于体径）。

非常欢迎任何使我的代码更有效的反馈。谢谢！： - ）

＆＃13;

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

＆＃13;

<!--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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以将参数传递给函数

，而不是为每个按钮使用单独的函数

function info(planet) {
    document.getElementById("bodyNameDisplay").innerText = bodyName[planet];
    document.getElementById("bodyDiamDisplay").innerText = bodyDiam[planet];
}

然后在按钮中，您可以传递参数onclick

<button type="button" class="button" id="plButton" onclick="info('pl')">Pluto</button>

如果您还想自动生成按钮，也可以使用javascript：

HTML：

<div id="buttons"></div>

js：

var buttonsContainer = document.body.getElementById("buttons");
for(var planetId in bodyName){ // Loop over every planet
    var button = document.createElement("button"); // Creates <button></button>
    button.setAttribute("onclick", "info('"+planetId+"')") // Add onclick=info('id');
    button.innerText = bodyName[planetId] // Add the text inside <button>PlanetName</button>
    button.classList.add("button"); // Add the class="button" class
    button.setAttribute("id", planetId+"Button"); // Add the id="idButton"
    button.setAttribute("type", "button"); // Add the type="button"
    buttonsContainer.appendChild(button); // Add the button to the div of buttons
}

示例：

//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 info(planet) {
  document.getElementById("bodyNameDisplay").innerText = bodyName[planet];
  document.getElementById("bodyDiamDisplay").innerText = bodyDiam[planet];
}



var buttonsContainer = document.getElementById("buttons");
for(var planetId in bodyName){ // Loop over every planet
  var button = document.createElement("button"); // Creates <button></button>
  button.setAttribute("onclick", "info('"+planetId+"')") // Add onclick=info(id);
  button.innerText = bodyName[planetId] // Add the text inside <button>PlanetName</button>
  button.classList.add("button"); // Add the class="button" class
  button.setAttribute("id", planetId+"Button"); // Add the id="idButton"
  button.setAttribute("type", "button"); // Add the type="button"
  buttonsContainer.appendChild(button); // Add the button to the div of buttions
}

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-->

<div id="buttons"></div>

<!--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>

Answer 2

您可以将行星标识符作为参数传递给info()函数：

function info(id) {
    document.getElementById("bodyNameDisplay").innerHTML = bodyName[id];
    document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam[id];
}

这样一个功能就足够了 HTML：

<button type="button" class="button" id="suButton" onclick="info('su')">Sun</button>

Answer 3

将两组细节转换为一个对象数组，其中包含该主体的详细信息。这样，您可以访问单个函数中的所有信息，只需将一个变量传递给将访问该对象索引的函数。在数组中，从单个对象返回名称和直径。

＆＃13;

//JavaScript

var bodies = [
  {name:"the Sun", "diameter": 864576},
  {name:"Mercury", diameter: 3032},
  {name:"Venus", diameter: 7521},
  {name:"Earth", diameter: 7918},
  {name:"the Moon", diameter: 2159},
  {name:"Mars", diameter: 4212},
  {name:"Jupiter", diameter: 86881},
  {name:"Saturn", diameter: 72367},
  {name:"Uranus", diameter: 31518},
  {name:"Neptune", diameter: 30599},
  {name:"Pluto", diameter: 1475},
];

function setInfo(index) {
	document.getElementById("bodyNameDisplay").innerHTML = bodies[index].name;
	document.getElementById("bodyDiamDisplay").innerHTML = bodies[index].diameter;
}

＆＃13;

<!--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;
  cursor: pointer;
}

.result {
  font-weight: bold;
  color: #e80;
}

＆＃13;

<!--html-->

<!--buttons-->

<button type="button" class="button" onclick="setInfo(0)">Sun</button>
<button type="button" class="button" onclick="setInfo(1)">Mercury</button>
<button type="button" class="button" onclick="setInfo(2)">Venus</button>
<button type="button" class="button" onclick="setInfo(3)">Earth</button>
<button type="button" class="button" onclick="setInfo(4)">Moon</button>
<button type="button" class="button" onclick="setInfo(5)">Mars</button>
<button type="button" class="button" onclick="setInfo(6)">Jupiter</button>
<button type="button" class="button" onclick="setInfo(7)">Saturn</button>
<button type="button" class="button" onclick="setInfo(8)">Uranus</button>
<button type="button" class="button" onclick="setInfo(9)">Neptune</button>
<button type="button" class="button" onclick="setInfo(10)">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>

＆＃13;

JavaScript函数需要帮助

3 个答案: