JavaScript関数の助けが必要

-3

私はJavaScriptを練習しており、少しプロジェクトを作りました...対応するボタンをクリックすると、太陽系内のさまざまなボディの直径を取得します。JavaScript関数の助けが必要

私はこれを行うことができましたが、それほど効率的ではありません。現在、私のコードが動作する唯一の方法は11の関数です。私は2つのオブジェクトも持っています（1つはボディ名用、もう1つはボディ径用です）。

私のコードをより効率的にするためのフィードバックは大歓迎です。ありがとうございました！代わりに、各ボタンに別々の機能を使用しての:-)

//JavaScript 
 

 
var bodyName = { 
 
\t su:"the Sun", 
 
\t me:"Mercury", 
 
\t ve:"Venus", 
 
\t ea:"Earth", 
 
\t mo:"the Moon", 
 
\t ma:"Mars", 
 
\t ju:"Jupiter", 
 
\t sa:"Saturn", 
 
\t ur:"Uranus", 
 
\t ne:"Neptune", 
 
\t pl:"Pluto" 
 
}; 
 

 
var bodyDiam = { 
 
\t su:864576, 
 
\t me:3032, 
 
\t ve:7521, 
 
\t ea:7918, 
 
\t mo:2159, 
 
\t ma:4212, 
 
\t ju:86881, 
 
\t sa:72367, 
 
\t ur:31518, 
 
\t ne:30599, 
 
\t pl:1475 
 
}; 
 

 
function suInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.su; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.su; 
 
} 
 

 
function meInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.me; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.me; 
 
} 
 

 
function veInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.ve; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ve; 
 
} 
 

 
function eaInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.ea; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ea; 
 
} 
 

 
function moInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.mo; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.mo; 
 
} 
 

 
function maInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.ma; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ma; 
 
} 
 

 
function juInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.ju; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ju; 
 
} 
 

 
function saInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.sa; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.sa; 
 
} 
 

 
function urInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.ur; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ur; 
 
} 
 

 
function neInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.ne; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodyDiam.ne; 
 
} 
 

 
function plInfo() { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodyName.pl; 
 
\t 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> \t

出典

2017-12-08 Kristina Castagnola

将来的に@JoshBeam、質問を閉じるための理由として、コードレビューを使用しないでください。リクエストを評価し、*あなたが求めているものが不明*、*広すぎ*、主に意見ベース*などの理由を使用してください。** [この回答は_Aです。 Stack Overflowユーザーのコードレビューへのガイド]（https://codereview.meta.stackexchange.com/a/5778/120114） –

@ JoshBeamいいえ、それは広すぎます。だからあなたはそれを閉じなければならないのです。それが別の場所に収まるかどうかは無関係です。それに、そこには良い質問が出る前に、深刻な仕事が必要です。 – Mast

は、あなたは、引数を渡すことができ、機能ボタンで次に

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

に引数を渡すことができますオンクリック

<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 = { 
 
\t su:"the Sun", 
 
\t me:"Mercury", 
 
\t ve:"Venus", 
 
\t ea:"Earth", 
 
\t mo:"the Moon", 
 
\t ma:"Mars", 
 
\t ju:"Jupiter", 
 
\t sa:"Saturn", 
 
\t ur:"Uranus", 
 
\t ne:"Neptune", 
 
\t pl:"Pluto" 
 
}; 
 

 
var bodyDiam = { 
 
\t su:864576, 
 
\t me:3032, 
 
\t ve:7521, 
 
\t ea:7918, 
 
\t mo:2159, 
 
\t ma:4212, 
 
\t ju:86881, 
 
\t sa:72367, 
 
\t ur:31518, 
 
\t ne:30599, 
 
\t 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>

出典

2017-12-08 20:25:53 pfg

あなたは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>

出典

2017-12-08 20:26:01 axiac

あなたは、単一の関数内のすべての情報にアクセスし、単純に変数を渡すことができるbody.Thisの方法の詳細を含むオブジェクトの1つの配列に細部の二組を変換します配列内のオブジェクトのインデックスにアクセスし、単一のオブジェクトから名前と直径を返す関数です。

//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) { 
 
\t document.getElementById("bodyNameDisplay").innerHTML = bodies[index].name; 
 
\t document.getElementById("bodyDiamDisplay").innerHTML = bodies[index].diameter; 
 
}

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

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

出典

2017-12-08 20:35:02 gavgrif

JavaScript関数の助けが必要

答えて

関連する問題