JS向列表框添加按钮

时间:2017-05-29 22:07:59

标签: javascript html audio

我正在编写一个JS应用程序,并且正在尝试创建一个列表框,用于添加用户选择的内容。它应该是这样的:

内容1 | + 内容2 | + ... 内容5 | +

其中内容是一个onclick按钮,当用户点击该按钮时会投射声音而+是添加按钮,以便您将该内容添加到列表中。

这就是我现在正在使用的:

var onReceiveCallback = function(info) {
  if (info.connectionId == expectedConnectionId && info.data) {
    var str = convertArrayBufferToString(info.data);
    if (str.charAt(str.length-1) === '\n') {
      stringReceived += str.substring(0, str.length-1);
      onLineReceived(stringReceived);
      stringReceived = '';
    } else {
      stringReceived += str;
    }  
  }
  setStatus('Recieved');
};
chrome.serial.onReceive.addListener(onReceiveCallback);

提前致谢!

1 个答案:

答案 0 :(得分:0)

我创建了一个jsfiddle。

如果您正在寻找,请告诉我。

https://jsfiddle.net/422Lojct/28/

    var cmajor = new Audio();
var cminor = new Audio();
var c_augmented = new Audio();
var c_diminished = new Audio();

cmajor.src = "cmajor.mp3";
cminor.src = "cminor.mp3";
c_augmented.src = "c_augmented.mp3";
c_diminished.src = "c_diminished.mp3";

function PlaySound(acorde) {
  switch (acorde) {
    case 'cmajor':
      cmajor.play();
      break;
    case 'cminor':
      cminor.play();
      break;
    case 'c_augmented':
      c_augmented.play();
      break;
    case 'c_diminished':
      c_diminished.play();
      break;
  }
}

function addList(item) {
  console.log(item);
  document.getElementById('listBox').appendChild(item);
}

HTML

<body>

  <audio id="cmajor"> </audio>
  <button onclick="PlaySound('cmajor')"> C major </button>
  <button type="button" onclick="addList(cmajor)">+</button>

  <audio id="cminor"> </audio>
  <button onclick="PlaySound('cminor')"> C minor </button>
  <button type="button" onclick="addList(cminor)">+</button>

  <audio id="c_augmented"> </audio>
  <button onclick="PlaySound('c_augmented')"> C augmented </button>
  <button type="button" onclick="addList(c_augmented)">+</button>

  <audio id="c_diminished"> </audio>
  <button onclick="PlaySound('c_diminished')"> C diminished </button>
  <button type="button" onclick="addList(c_diminished)">+</button>

  <div id="listBox">

  </div>
</body>