尝试传入一个对象作为innerHTML函数的参数

时间:2014-10-23 10:30:12

标签: javascript function object innerhtml

我试图根据几种不同对象的选择来填充多个表格单元格innerHTML。我目前有多个功能,每个选项一个:

<input onClick="firstChoice();" type="radio" id="first-choice">
<input onClick="secondChoice();" type="radio" id="second-choice">

<tr>
  <td>A</td>
  <td id="aCell">xx</td>
</tr>
<tr>
  <td>B</td>
  <td id="bCell">xx</td> 
</tr>

<script>
function Foo(a, b) {
  this.a = a;
  this.b = b;
}

first = new Foo(42, 8);
second = new Foo(100, 4);

var aCell = document.getElementById("first-choice");
var bCell = document.getElementById("second-choice");

function firstChoice() {
  aCell.innerHTML = first.a;
  bCell.innerHTML = first.b;
}

function secondChoice() {
  aCell.innerHTML = second.a;
  bCell.innerHTML = second.b;
}
</script>

这当前有效,但我确定必须有一种方法可以使用单个函数并将对象作为参数传入,而不是为每个对象提供一个函数,但我很缺乏经验javascript并且似乎无法在任何地方找到答案,而且反复试验花了我几个小时。我正在寻找可能符合以下方面的内容:

function choice(choicePicked) {
  aCell.innerHTML = choicePicked.a;
  bCell.innerHTML = choicePicked.b;
}

或者可能有完全不同的完成任务的方式 - 任何帮助都会受到赞赏!

1 个答案:

答案 0 :(得分:2)

你正走在正确的轨道上:

function choice(choicePicked) {
    aCell.innerHTML = choicePicked.a;
    bCell.innerHTML = choicePicked.b;
}

您只需要更改这样的事件处理程序:

<input onClick="choice(first);" type="radio" id="first-choice">
<input onClick="choice(second);" type="radio" id="second-choice">

这样,您将所需的对象传递给choice函数。