Question

我很抱歉提出一个问题，我确信这很简单，但是我被卡住了。我有一个项目要求用户选择3个音符，每个音符的值应填入文本框，直到输入第3个音符。之后，对阵列进行比较，并向用户发送通知，让他们知道他们是否进行了有效选择。我遇到的问题是填充所有3个，每次单击按钮都会覆盖现有值。我试图将它们推送到一个数组，但它只包含当前值，我尝试了一个循环但是填充了选择3x。我确定我忽略了一些简单但却无法弄清楚它是什么的东西。有人能指出我正确的方向吗？谢谢！

<!doctype html>
<html>
<head>
  <title> Scope </title>
  <meta charset="utf-8">
  <style>
    html {
      height: 100%;
    }
    body {
      height: 100%;
      margin: 0px;
      font-family: Helvetica, sans-serif;
    }
    div#container {
       margin: auto;
       width: 300px;
    }
    form {
       margin-top: 20%;
    }
    form input[type="text"] {
       font-size: 120%;
       text-align: center;
    }
    form input[type="button"] {
       background-color: lightblue;
       font-size: 110%;
    }
</style>

<script>
   function addNote(event) {

      var validChords = {
         C: "CEG",
         F: "FAC",
         G: "GBD"
      };  

      var note = event.target.value;
      console.log(note);   

      var getNotes = [];
      var noteDisplay = document.getElementById("notesDisplay");
      var displayMessage = document.getElementById("message");

      getNotes.push(note);
      console.log(getNotes);

      noteDisplay.value = getNotes;
      noteDisplay.innterHTML = getNotes;
      displayMessage.innterHTML = "Please Enter Antoher Note!";

//Code below is different things I've been playing with trying to
// figure this out.  

//  var success = false;
//  if (notes.length > 0) {
//    if (note) {
//     for (var i =0; i < 3; i++) {
//       if(notes[i] == note) {
//         var found = true;
//         getNotes.push(note);
//     }
//    }     
//   }   
//  }   
 // if (getNotes.length < 3) {
  // }           

}              

window.onload = function() {
 var notes = ["C", "D", "E", "F", "G", "A", "B"];

 var cButton = document.getElementById("c");
 cButton.onclick = addNote;
 var dButton = document.getElementById("d");
 dButton.onclick = addNote;
 var eButton = document.getElementById("e");
 eButton.onclick = addNote;
 var fButton = document.getElementById("f");
 fButton.onclick = addNote;
 var gButton = document.getElementById("g");
 gButton.onclick = addNote;
 var aButton = document.getElementById("a");
 aButton.onclick = addNote;
 var bButton = document.getElementById("b");
 bButton.onclick = addNote;

// your code here    
} 
</script>
</head>
<body>
  <div id="container">
<form>
  <p id="message">Enter a major triad chord:</p>
  <p>
  <input id="notesDisplay" type="text" size="21">
 </p>
 <p>
   <input id="c" type="button" value="C">
   <input id="d" type="button" value="D">
   <input id="e" type="button" value="E">
   <input id="f" type="button" value="F">
   <input id="g" type="button" value="G">
   <input id="a" type="button" value="A">
   <input id="b" type="button" value="B">
</p>
</form>
</div>
</body>
</html>

我终于想出了如何获取条目并与包含特定值的对象进行比较，并返回一条注释或一条消息再试一次。我几乎就在那里，但我的循环问题（我认为）。当点击一个按钮时，应该显示一条消息，说明＆＃34;请输入另一个注释＆＃34;在进行第3次选择之前，当点击第一个按钮时，我得到了＆＃34;你发出了无效的选择消息＆＃34;而且我不明白为什么。我遗漏的最后一块是在显示任何一条消息后表格应该清除。这让我疯了，有人能给我一个关于我还有错的提示吗？谢谢！

修订代码：范围 html { 身高：100％; } 身体 { 身高：100％; 保证金：0px; font-family：Helvetica，sans-serif; } div＃container { 保证金：自动; 宽度：300px; } 形式{ 保证金最高限额：20％; } 表格输入[type =＆＃34; text＆＃34;] { font-size：120％; text-align：center; } 表格输入[type =＆＃34; button＆＃34;] { 背景颜色：浅蓝色; font-size：110％; }

//Array to hold notes entered by user, counter to hold number of 
//buttons clicked
var getNotes = [];   
var counter = 0;

//addNote function, collects the notes entered by the user and displays 
//them in the text box. When the number of notes entered equals 3 a 
//compare is done to the validChords object. If the notes equal a valid 
//chord a messages is displayed to the user telling them which chord was 
//entered, if the chord is not correct a message is displayed telling 
//them to try again. After either the form should be cleared.

function addNote(event) {
  var validChords = {
     C: "CEG",
     F: "FAC",
     G: "GBD"
  };

  var note = event.target.value;
  var noteDisplay = document.getElementById("notesDisplay");
  var displayMessage = document.getElementById("message");

  if (counter <= 3)  {
    getNotes.push(note);
    var removeComma = "";

    for (i = getNotes.length-1; i >=0; i--) {
       removeComma = getNotes[i]+removeComma;
    }   

   noteDisplay.value = removeComma;
   noteDisplay.innerHTML = removeComma;
   displayMessage.innerHTML = "Please Enter Antoher Note!";
   counter = counter+1;
} 

 if (counter == 3) {
    for (var prop in validChords) {
      if (removeComma === validChords[prop]) {
      displayMessage.innerHTML = "You have entered a " + prop + "    
         Chord!";
      notesDisplay.innterHTML = " ";
      counter = 0;
      } 
    } 
 } else {
    displayMessage.innerHTML = "You have not entered a valid chord, 
       please try again!";
    notesDisplay.innterHTML = " ";
    counter = 0;
   }
  }    

    window.onload = function() {
    var notes = ["C", "D", "E", "F", "G", "A", "B"];

    var cButton = document.getElementById("c");
    cButton.onclick = addNote;
    var dButton = document.getElementById("d");
    dButton.onclick = addNote;
    var eButton = document.getElementById("e");
    eButton.onclick = addNote;
    var fButton = document.getElementById("f");
    fButton.onclick = addNote;
    var gButton = document.getElementById("g");
    gButton.onclick = addNote;
    var aButton = document.getElementById("a");
    aButton.onclick = addNote;
    var bButton = document.getElementById("b");
    bButton.onclick = addNote;

   } 
  </script>
</head>
<body>
<div id="container">
<form>
  <p id="message">Enter a major triad chord:</p>
  <p>
  <input id="notesDisplay" type="text" size="21">
  </p>
  <p>
   <input id="c" type="button" value="C">
   <input id="d" type="button" value="D">
   <input id="e" type="button" value="E">
   <input id="f" type="button" value="F">
   <input id="g" type="button" value="G">
   <input id="a" type="button" value="A">
   <input id="b" type="button" value="B">
  </p>
</form>
</div>
</body>
</html>

Answer 1

我相信它是因为每次调用addNote函数时都会将getNote初始化为空数组，请检查是否存在问题。

谢谢

JavaScript范围 - 填充多个选项的文本框

1 个答案: