ある「選択」から別の「選択」に物事を移動する小さな演習を書いています。よく働く!複数選択はまだありませんが、後で行います。さらに重要なことに、「オプション」に関連付けられた値を合計できるように、カウンターを追加すると考えました。その機能は働いていないようです。ある列から別の列に物を移動すると、合計値を意味するラベルがテキスト 0[object Object] で埋められます。これは明らかな間違いによるものだと確信していますが、この問題を他の言葉で明確に説明するための語彙が不足しています。教えて下さい?:-)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style type="text/css">
#selectSource {
width: 320px;
}
#selectTarget {
width: 320px;
}
#wgtsum {
width: 22px;
}
#cubesum {
width: 22px;
}
</style>
<title>Loader</title>
<script>
var data;
var sumCube = 0;
var sumWgt = 0;
window.onload = function () {
//Add way to load JSON data from a text file or something
var load = document.getElementById('selectSource')
data = [
{ num: "1", cube: 6, wgt: 2, title: "num: 1 cube: 6 wgt: 2" },
{ num: "2", cube: 4, wgt: 4, title: "num: 2 cube: 4 wgt: 4" },
{ num: "3", cube: 2, wgt: 6, title: "num: 3 cube: 2 wgt: 6" }
];
for (i = 0; i < data.length; i++) {
load.options.add(new Option(data[i].title, data[i].num));
}
}
function sum() {
var sumTarget = document.getElementById('selectTarget');
for (i = 0; i < data.length; i++) {
for (o = 0; o < sumTarget.length; o++) {
if (sumTarget[o].value = data[i].value) {
sumCube = sumCube + data[i].cube;
sumWgt = sumWgt + data[i].wgt;
}
}
}
document.getElementById("cubesum").setAttribute("value", sumCube);
document.getElementById("wgtsum").setAttribute("value", sumWgt);
}
function move(from, to) {
selected = from.options.selectedIndex;
to.options.add(new Option(from.options[selected].text, from.options[selected].value));
from.options.remove(selected);
sum();
}
</script>
</head>
<body>
<form>
<select id="selectTarget" size="4">
</select>
<button type="button" onclick="move(this.form.selectSource, this.form.selectTarget)" style="width: 58px">To Target</button>
<button type="button" onclick="move(this.form.selectTarget, this.form.selectSource)" style="width: 58px">To Source</button>
<select id="selectSource" size="4">
</select>
<input value="0" type="text" id="cubesum" size="5"/>
<input value="0" type="text" id="wgtsum" size="5"/>
</form>
</body>
</html>