从多个按钮发送值以使用纯JS输入

Question

我是JS的新手，正在尝试找出一些问题：

我需要设置一个条件，以便同时单击第1行和第2行中的按钮，当按下Submit时，我需要将它们的组合值显示在<input>中。 例如，它应该显示如下内容：“ Person 2的$ 40”这仅包含 JS（无jQuery）。

<div>
    <div>
      <span>Row 1</span>
      <button>$10</button>
      <button>$20</button>
      <button>$30</button>
      <button>$40</button>
    </div>
    <hr>
    <div>
      <span>Row 2</span>
      <button>Person 1</button>
      <button>Person 2</button>
      <button>Person 3</button>
      <button>Person 4</button>
    </div>
    <hr>
    <button>Submit</button>
    <div><input></div>
  </div>

Answer 1

仅使用JavaScript，您可以使用（ jsFiddle ）之类的东西：

var buttons = document.getElementsByTagName('button'),
    input = document.getElementsByTagName('input')[0],
    first, second;

for(var i=0;i<buttons.length;i++){
    buttons[i].addEventListener('click', function(){
        if(this.firstChild.nodeValue.charAt(0)=='$'){
            first = this.firstChild.nodeValue;
        }else if(this.firstChild.nodeValue !== 'Submit'){
            second = this.firstChild.nodeValue;
        }else{
            if(first==null || second==null){
                alert('You must click a button from each row');
            }else{
                input.value = first+' by '+second;
            }
        } 
    });
}

这取决于称为“提交”的最后一个按钮以及以$开头的第一行按钮。 如果并非总是如此，请考虑添加一个类来区分每一行。