Question

我仍然是JavaScript编程的新手，我遇到了一个问题。

HTML：

<form id="practiceForm" style="display:inline">
    <select id="practiceList" size="1">
        <option value="sampleA" selected="selected">Sample A</option>
        <option value="sampleB">Sample B</option>
        <option value="sampleC">Sample C</option>
    </select>
</form>
<button onclick="changeSelection();">Select</button><br />

<span id="currentSelected">Nothing selected</span><br /><br />
Name: <span id="name"></span><br />
Size: <span id="size"></span><br />
Shape: <span id="shape"></span><br />
Value: <span id="value"></span>

JavaScript的：

/* var stats = {
    sampleA: { name: "Alpha", size: 3, shape: square, value: 1 },
    sampleB: { name: "Delta", size: 1, shape: circle, value: 10 },
    sampleC: { name: "Gamma", size: 25, shape, triangle, value: 200 }
}; */

function changeSelection() {
    document.getElementById("currentSelected").innerHTML = practiceForm.practiceList.options[practiceForm.practiceList.selectedIndex].value;
    document.getElementById("name").innerHTML = currentSelected.name;
    document.getElementById("size").innerHTML = currentSelected.size;
    document.getElementById("shape").innerHTML = currentSelected.shape;
    document.getElementById("value").innerHTML = currentSelected.value;
}

我要做的是，使用带按钮的项目组合框列表。当您单击该按钮时，我需要将部分HTML更改为我在开始时在变量中设置的值。

现在的代码在JSFiddle中运行。但是，只要我对变量声明“统计数据”不予评论，它就会混乱，这让我很困惑。另外，请原谅所有没有纪律的东西，比如内联样式:)这只是用于调试测试。

我在这里还有一件事 - 是否有办法在changeSelection（）函数中缩写第一行？我见过很多例子，但它们都不同。

Answer 1

它不会像这样工作。您需要通过所选值访问统计数据。

var stats = {
    'sampleA': { name: "Alpha", size: 3, shape: 'square', value: 1 },
    'sampleB': { name: "Delta", size: 1, shape: 'circle', value: 10 },
    'sampleC': { name: "Gamma", size: 25, shape: 'triangle', value: 200 }
};

function changeSelection() {
    document.getElementById("currentSelected").innerHTML = practiceForm.practiceList.options[practiceForm.practiceList.selectedIndex].value;    
    document.getElementById("name").innerHTML = stats[practiceList.value].name;
    document.getElementById("size").innerHTML = stats[practiceList.value].size;
    document.getElementById("shape").innerHTML = stats[practiceList.value].shape;
    document.getElementById("value").innerHTML = stats[practiceList.value].value;
}

看看这个小提琴。 http://jsfiddle.net/9QXc4/

Answer 2

由于您的对象，它在控制台中抛出语法错误。

var stats = {
    sampleA: { name: "Alpha", size: 3, shape: "square", value: 1 },
    sampleB: { name: "Delta", size: 1, shape: "circle", value: 10 },
    sampleC: { name: "Gamma", size: 25, shape: "triangle", value: 200 }
};

以上是正确的语法。需要修理的事情：

- 报价属性值！方形，圆形和三角形没有引用。 - “shape”属性使用逗号而不是冒号来声明值

编程时使用控制台，您会立即看到此错误：

Uncaught SyntaxError: Unexpected token ,

原因是：

sampleC: { name: "Gamma", size: 25, shape, "triangle", value: 200 }
                                        ^^

Answer 3

只需将此sampleC: { name: "Gamma", size: 25, shape, triangle, value: 200 }

替换为sampleC: { name: "Gamma", size: 25, shape: triangle, value: 200 }即可

您输入逗号而不是冒号

Javascript：根据表单值更改DOM元素

3 个答案: