IFステートメントに論理演算子を設定する必要がある -- javascript フィールド と html フィールド 関連 問題

Need help setting logic operator in if statement












0
vote

問題

日本語

それはかなり標準的な論理であるべきですが、何らかの理由で仕事に入ることができませんでした。

特定の選択の組み合わせが行われたときにのみコードに警告メッセージを表示させたい。どのランダが選択されているかにかかわらず、PLUTOが選択されたときに警告テキストが表示されます。私は、冥王星が非絶対地域で選択されているときにそれが起こるのを意図しています。

 <コード> //Lander Selection  var ReUsable = false;    function LanderSelect() {    if (document.getElementById('NonReUse').checked) {      ReUsable = false;    } else if (document.getElementById('ReUse').checked) {      ReUsable = true;    }  }  //List of Moons  const Moons = {    Earth: ["Luna"],    Mars: ["", "Phobos", "Deimos"],    Jupiter: ["Metis", "Amalthea", "Thebe", "Io", "Europa", "Ganymede", "Callisto", "Himalia", "Lysithea", "Elara"],    Saturn: ["Mimas", "Enceladus", "Tethys", "Dione", "Rhea", "Titan", "Iapetus", "Hyperion", "Phoebe", "Janus"],    Uranus: ["Titania", "Oberon", "Ariel", "Umbriel", "Miranda", "Puck", "Sycorax", "Portia", "Juliet", "Belinda"],    Neptune: ["Triton", "Proteus", "Nereld", "Larissa", "Galatea", "Despina", "Thalassa", "Naiad", "Halimede", "Neso"],    Pluto: ["Charon", "Styx", "Nix", "Kerbos", "Hydra"]  }  //Launch Moon  function LaunchMoonSelect(value) {    var MoonOptions = "";    for (MoonId in Moons[value]) {      MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";    }    document.getElementById("LaunchMoon").innerHTML = MoonOptions;  }  //Des Moon Selector  function DesMoonSelect(value) {    if (value != "Pluto") {      document.getElementById("DesWarning").style.display = "none";      var MoonOptions = "";      for (MoonId in Moons[value]) {        MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";      }      document.getElementById("DestMoon").innerHTML = MoonOptions;    }        else {      document.getElementById("DesWarning").style.display = "block";      var MoonOptions = "";      for (MoonId in Moons[value]) {        MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";      }      document.getElementById("DestMoon").innerHTML = MoonOptions;    }  }  
 <コード> NonReusable Landers <input type="radio" name="yesno" id="NonReUse" onclick="LanderSelect()" value="ture"></input>  Reusable Landers <input type="radio" name="yesno" id="ReUse" onclick="LanderSelect()"></input>  <table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto;" border="1">    <tr style="height: 20px;">      <td style="width: 125px; text-align: center;vertical-align:middle">Destination</td>      <td style="width: 125px; text-align: center;">Planet: </br>        <select class="select" id="DestPlan" onChange="DesMoonSelect(this.value);">          <option value="Mercury">Mercury</option>          <option value="Venus">Venus</option>          <option value="Earth" selected>Earth</option>          <option value="Mars">Mars</option>          <option value="Jupiter">Jupiter</option>          <option value="Saturn">Saturn</option>          <option value="Uranus">Uranus</option>          <option value="Neptune">Neptune</option>          <option value="Pluto">Pluto</option>        </select>      </td>      <td style="width: 125px; text-align: center;"> Moon: </br>        <select class="select" id="DestMoon">          <option value="Luna" selected style="color:white">Luna</option>        </select>        <p id="DesWarning" style="color:red; display:none;"><strong>Can't Reach!!</Strong></p>      </td>    </tr>  

およびコードの if else{...} を挿入した後、月選択は警告テキスト

でも機能させません。

 <コード> //Lander Selection  var ReUsable = false;    function LanderSelect() {    if (document.getElementById('NonReUse').checked) {      ReUsable = false;    } else if (document.getElementById('ReUse').checked) {      ReUsable = true;    }  }  //List of Moons  const Moons = {    Earth: ["Luna"],    Mars: ["", "Phobos", "Deimos"],    Jupiter: ["Metis", "Amalthea", "Thebe", "Io", "Europa", "Ganymede", "Callisto", "Himalia", "Lysithea", "Elara"],    Saturn: ["Mimas", "Enceladus", "Tethys", "Dione", "Rhea", "Titan", "Iapetus", "Hyperion", "Phoebe", "Janus"],    Uranus: ["Titania", "Oberon", "Ariel", "Umbriel", "Miranda", "Puck", "Sycorax", "Portia", "Juliet", "Belinda"],    Neptune: ["Triton", "Proteus", "Nereld", "Larissa", "Galatea", "Despina", "Thalassa", "Naiad", "Halimede", "Neso"],    Pluto: ["Charon", "Styx", "Nix", "Kerbos", "Hydra"]  }  //Launch Moon  function LaunchMoonSelect(value) {    var MoonOptions = "";    for (MoonId in Moons[value]) {      MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";    }    document.getElementById("LaunchMoon").innerHTML = MoonOptions;  }  //Des Moon Selector  function DesMoonSelect(value) {    if (value != "Pluto") {      document.getElementById("DesWarning").style.display = "none";      var MoonOptions = "";      for (MoonId in Moons[value]) {        MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";      }      document.getElementById("DestMoon").innerHTML = MoonOptions;    }     else if(ReUsable == true) {  document.getElementById("DesWarning").style.display = "none";  var MoonOptions = "";  for (MoonId in Moons[value]) {    MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";  }  document.getElementById("DestMoon").innerHTML = MoonOptions;}    else {      document.getElementById("DesWarning").style.display = "block";      var MoonOptions = "";      for (MoonId in Moons[value]) {        MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";      }      document.getElementById("DestMoon").innerHTML = MoonOptions;    }  }  
 <コード> NonReusable Landers <input type="radio" name="yesno" id="NonReUse" onclick="LanderSelect()" value="ture"></input>  Reusable Landers <input type="radio" name="yesno" id="ReUse" onclick="LanderSelect()"></input>  <table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto;" border="1">    <tr style="height: 20px;">      <td style="width: 125px; text-align: center;vertical-align:middle">Destination</td>      <td style="width: 125px; text-align: center;">Planet: </br>        <select class="select" id="DestPlan" onChange="DesMoonSelect(this.value);">          <option value="Mercury">Mercury</option>          <option value="Venus">Venus</option>          <option value="Earth" selected>Earth</option>          <option value="Mars">Mars</option>          <option value="Jupiter">Jupiter</option>          <option value="Saturn">Saturn</option>          <option value="Uranus">Uranus</option>          <option value="Neptune">Neptune</option>          <option value="Pluto">Pluto</option>        </select>      </td>      <td style="width: 125px; text-align: center;"> Moon: </br>        <select class="select" id="DestMoon">          <option value="Luna" selected style="color:white">Luna</option>        </select>        <p id="DesWarning" style="color:red; display:none;"><strong>Can't Reach!!</Strong></p>      </td>    </tr>  

p.S。これまでに拡張されたライブラリが必要な場合は、基本的なJSだけを学びました。
のいくつかのコンポーネントがどのように機能するかを詳しく説明してください。 P.P.P.Signal Input TypeがFlipFlopのように機能するための<コード> name="" が必要なのはなぜですか?
P.P.P.P.ASTRAYの初期状態を設定しますか?

英語

It should be a fairly standard logic, but for some reason, I couldn't get it to work.

I want the code to display a warning message only when a certain combination of selections have been made. The warning text will display when Pluto is selected, regardless of which lander has been selected. I only intend for it to happen when pluto is selected with the NonReusableLanders.

//Lander Selection  var ReUsable = false;    function LanderSelect() {    if (document.getElementById('NonReUse').checked) {      ReUsable = false;    } else if (document.getElementById('ReUse').checked) {      ReUsable = true;    }  }  //List of Moons  const Moons = {    Earth: ["Luna"],    Mars: ["", "Phobos", "Deimos"],    Jupiter: ["Metis", "Amalthea", "Thebe", "Io", "Europa", "Ganymede", "Callisto", "Himalia", "Lysithea", "Elara"],    Saturn: ["Mimas", "Enceladus", "Tethys", "Dione", "Rhea", "Titan", "Iapetus", "Hyperion", "Phoebe", "Janus"],    Uranus: ["Titania", "Oberon", "Ariel", "Umbriel", "Miranda", "Puck", "Sycorax", "Portia", "Juliet", "Belinda"],    Neptune: ["Triton", "Proteus", "Nereld", "Larissa", "Galatea", "Despina", "Thalassa", "Naiad", "Halimede", "Neso"],    Pluto: ["Charon", "Styx", "Nix", "Kerbos", "Hydra"]  }  //Launch Moon  function LaunchMoonSelect(value) {    var MoonOptions = "";    for (MoonId in Moons[value]) {      MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";    }    document.getElementById("LaunchMoon").innerHTML = MoonOptions;  }  //Des Moon Selector  function DesMoonSelect(value) {    if (value != "Pluto") {      document.getElementById("DesWarning").style.display = "none";      var MoonOptions = "";      for (MoonId in Moons[value]) {        MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";      }      document.getElementById("DestMoon").innerHTML = MoonOptions;    }        else {      document.getElementById("DesWarning").style.display = "block";      var MoonOptions = "";      for (MoonId in Moons[value]) {        MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";      }      document.getElementById("DestMoon").innerHTML = MoonOptions;    }  }
NonReusable Landers <input type="radio" name="yesno" id="NonReUse" onclick="LanderSelect()" value="ture"></input>  Reusable Landers <input type="radio" name="yesno" id="ReUse" onclick="LanderSelect()"></input>  <table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto;" border="1">    <tr style="height: 20px;">      <td style="width: 125px; text-align: center;vertical-align:middle">Destination</td>      <td style="width: 125px; text-align: center;">Planet: </br>        <select class="select" id="DestPlan" onChange="DesMoonSelect(this.value);">          <option value="Mercury">Mercury</option>          <option value="Venus">Venus</option>          <option value="Earth" selected>Earth</option>          <option value="Mars">Mars</option>          <option value="Jupiter">Jupiter</option>          <option value="Saturn">Saturn</option>          <option value="Uranus">Uranus</option>          <option value="Neptune">Neptune</option>          <option value="Pluto">Pluto</option>        </select>      </td>      <td style="width: 125px; text-align: center;"> Moon: </br>        <select class="select" id="DestMoon">          <option value="Luna" selected style="color:white">Luna</option>        </select>        <p id="DesWarning" style="color:red; display:none;"><strong>Can't Reach!!</Strong></p>      </td>    </tr>

And after I insert the if else{...} part of the code, the moon selection doesn't even work let alone the warning text

//Lander Selection  var ReUsable = false;    function LanderSelect() {    if (document.getElementById('NonReUse').checked) {      ReUsable = false;    } else if (document.getElementById('ReUse').checked) {      ReUsable = true;    }  }  //List of Moons  const Moons = {    Earth: ["Luna"],    Mars: ["", "Phobos", "Deimos"],    Jupiter: ["Metis", "Amalthea", "Thebe", "Io", "Europa", "Ganymede", "Callisto", "Himalia", "Lysithea", "Elara"],    Saturn: ["Mimas", "Enceladus", "Tethys", "Dione", "Rhea", "Titan", "Iapetus", "Hyperion", "Phoebe", "Janus"],    Uranus: ["Titania", "Oberon", "Ariel", "Umbriel", "Miranda", "Puck", "Sycorax", "Portia", "Juliet", "Belinda"],    Neptune: ["Triton", "Proteus", "Nereld", "Larissa", "Galatea", "Despina", "Thalassa", "Naiad", "Halimede", "Neso"],    Pluto: ["Charon", "Styx", "Nix", "Kerbos", "Hydra"]  }  //Launch Moon  function LaunchMoonSelect(value) {    var MoonOptions = "";    for (MoonId in Moons[value]) {      MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";    }    document.getElementById("LaunchMoon").innerHTML = MoonOptions;  }  //Des Moon Selector  function DesMoonSelect(value) {    if (value != "Pluto") {      document.getElementById("DesWarning").style.display = "none";      var MoonOptions = "";      for (MoonId in Moons[value]) {        MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";      }      document.getElementById("DestMoon").innerHTML = MoonOptions;    }     else if(ReUsable == true) {  document.getElementById("DesWarning").style.display = "none";  var MoonOptions = "";  for (MoonId in Moons[value]) {    MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";  }  document.getElementById("DestMoon").innerHTML = MoonOptions;}    else {      document.getElementById("DesWarning").style.display = "block";      var MoonOptions = "";      for (MoonId in Moons[value]) {        MoonOptions += "<option>" + Moons[value][MoonId] + "</option>";      }      document.getElementById("DestMoon").innerHTML = MoonOptions;    }  }
NonReusable Landers <input type="radio" name="yesno" id="NonReUse" onclick="LanderSelect()" value="ture"></input>  Reusable Landers <input type="radio" name="yesno" id="ReUse" onclick="LanderSelect()"></input>  <table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto;" border="1">    <tr style="height: 20px;">      <td style="width: 125px; text-align: center;vertical-align:middle">Destination</td>      <td style="width: 125px; text-align: center;">Planet: </br>        <select class="select" id="DestPlan" onChange="DesMoonSelect(this.value);">          <option value="Mercury">Mercury</option>          <option value="Venus">Venus</option>          <option value="Earth" selected>Earth</option>          <option value="Mars">Mars</option>          <option value="Jupiter">Jupiter</option>          <option value="Saturn">Saturn</option>          <option value="Uranus">Uranus</option>          <option value="Neptune">Neptune</option>          <option value="Pluto">Pluto</option>        </select>      </td>      <td style="width: 125px; text-align: center;"> Moon: </br>        <select class="select" id="DestMoon">          <option value="Luna" selected style="color:white">Luna</option>        </select>        <p id="DesWarning" style="color:red; display:none;"><strong>Can't Reach!!</Strong></p>      </td>    </tr>

P.S. I've only learned basic JS so far, if this needs the expanded libraries, please explain in detail how some of the components work.
P.P.S Why does the radio input type need name="" for it to function like a flipflop?
P.P.P.S How do I set the initial state for the radio checkbox?

</div
     
 
 

回答リスト

1
 
vote
else if { ... } には、代わりに if else に配置し、その代わりに構文エラーが発生します。 IDEまたはテキストエディタを使用することをお勧めします(vscodeやAtomをお勧めします)、そのようにエディタはTypos / Syntaxの間違いを見つけることができます。

ラジオチェックボックスの初期状態を設定する方法?

設定入力のデフォルト値の場合は、入力タグ内の<コード> value 属性に割り当てます。

 <コード> <input type="text" value='Bob'>   

FlipFlopのように機能するための name="" が必要なのはなぜですか?

`ORDER DATE` 0 入力タグの属性は、フォームがサーバーに送信されたときの入力値を識別します。

これまでの基本的なJSだけを学びましたが、拡張されたライブラリが必要な場合は、コンポーネントのいくつかが機能する方法について詳しく説明してください。

学習ライブラリに焦点を当てている前に、あなたが基本的なJSを学んでいる方法について説明しました、私はそのトラックを進め続け、快適な学習をプレーンJSの使い方を得ることを提案しました。 JSがどのように機能するかを知らずに学習ライブラリにジャンプすると、タフな時間があります。

 

For the else if { ... } you placed if else instead which will cause a syntax error. I suggest using IDE or Text Editor(I would recommend VSCode or Atom), that way the editor will spot typos/syntax mistakes.

How do I set the initial state for the radio checkbox?

For the setting input default value, assign it to value attribute inside input tag:

<input type="text" value='Bob'> 

Why does the radio input type need name="" for it to function like a flipflop?

name attribute on input tag identifies the input value, when the form is submitted to the server.

I've only learned basic JS so far, if this needs the expanded libraries, please explain in detail how some of the components work.

Before focusing on learning libraries, you mentioned how you're learning basic JS, I suggest keep going on that track and get comfortable learning how to use plain JS. If you jump into learning libraries without knowing the basics of how JS works, you'll have a tough time.

</div
 
 
   
   

関連する質問

80  WebサービスからHTML文書を印刷する方法  ( How do i print an html document from a web service ) 
C#WebサービスからHTMLを印刷したいです。 Webブラウザコントロールはオーバーキルであり、サービス環境ではうまく機能しないため、非常に厳しいセキュリティ制約を持つシステムではうまく機能しません。基本的なHTMLページの印刷をサポートする<コード> 9...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

4  Webの未来は何ですか? XHTML 2、HTML 5、または何か他のもの?  ( Whats the future of the web xhtml 2 html 5 or something else ) 
新しいバージョンのHTMLとXHTMLの新しいバージョンの両方の議論と進歩に混乱しています。彼らは競争相手ですか?もしそうなら、Webの採用された未来になることが最も好意的ですか?そうでなければ、それぞれの競合されていない目的は何ですか? ここではBluray...

273  HTML形式の複数の送信ボタン  ( Multiple submit buttons in an html form ) 
HTMLフォームにウィザードを作成しましょう。 1つのボタンが戻ってき、1つが進みます。 ENTER を押すと、背面ボタンが最初に表示されているので、そのボタンを使用してフォームを送信します。 例: <コード> <form> <!-- Pu...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

31  私は私のウェブサイトをiPhoneのアイコンに与えるのですか?  ( How do i give my websites an icon for iphone ) 
私が作成したWebサイトの iPhone に適切なアイコンを設定する方法は? ...

635  ユーザーのタイムゾーンを決定します  ( Determine a users timezone ) 
WebサーバーがWebページ内のユーザーのタイムゾーンを決定できるようにするための標準的な方法はありますか? おそらくHTTPヘッダーまたは<コード> Form7 string? ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有