childNodes

by yshrkn

HTML

<dl id="scores">
  <dt>青木</dt><dd>78</dd>
  <dt>目黒</dt><dd>68</dd>
  <dt>吉原</dt><dd>72</dd>
</dl>

total score: <br><output id="output"></output>

CSS

#output {
  border: 2px solid black;
  background-color: white;
  padding: 5px;
  min-width: 100px;
  display: inline-block;
  height: 1em;
}

JavaScript

/**
 * スコア合計を #output へ出力してください
 */

var scores = document.querySelectorAll("#scores > dd");
var output = document.getElementById("output");
var result = 0;

for (var i = 0, len = scores.length; i < len; i++) {
  // 要素ノードであるか判定（）
  if (scores[i].nodeType === 1) {
    result += parseInt(scores[i].innerText, 10);
  }
}

output.textContent = result;