网页中的 JavaScript 幻灯片放映

Question

我有一项任务是使用 javascript 在网页上创建伪“幻灯片放映”。这个想法是在屏幕上显示一张图像，其下方有按钮，用户可以单击这些按钮来选择他们希望看到的图像。我试图通过在简短的 javascript 中更改“显示”属性值来做到这一点，但按钮没有做任何事情。

JavaScript:

function Apples()
        {
            document.getElementById("Apples").style.display="inline";
            document.getElementById("Grapes").style.display="none";
            document.getElementById("Strawberry").style.display="none";
        }
        function Grapes()
        {
            document.getElementById("Apples").style.display="none";
            document.getElementById("Grapes").style.display="inline";
            document.getElementById("Strawberry").style.display="none";
        }
        function Strawberries()
        {
            document.getElementById("Apples").style.display="none";
            document.getElementById("Grapes").style.display="none";
            document.getElementById("Strawberry").style.display="inline";
        }

HTML 按钮:

<input type="submit" value="Apples" onClick="Apples()" />
<input type="submit" value="Grapes" onClick="Grapes()" />
<input type="submit" value="Strawberries" onClick="Strawberries()" />

javascript 中使用的“Apples”、“Grapes”和“Strawberries”是我为每张图片指定的 ID。

Answer 1

我认为您遇到了一些命名冲突。输入值、ID 和名称等

这是有效的 http://jsfiddle.net/3TbMC/

我已将您的方法名称更改为 showApples 和 showGrapes 等...

JS

function showApples()
{
    document.getElementById("Apples").style.display="inline";
    document.getElementById("Grapes").style.display="none";
    document.getElementById("Strawberry").style.display="none";
};

function showGrapes()
{
    document.getElementById("Apples").style.display="none";
    document.getElementById("Grapes").style.display="inline";
    document.getElementById("Strawberry").style.display="none";
};

function showStrawberries()
{
    document.getElementById("Apples").style.display="none";
    document.getElementById("Grapes").style.display="none";
    document.getElementById("Strawberry").style.display="inline";
};

HTML

<input type="submit" value="Apples" onClick="showApples();" />
<input type="submit" value="Grapes" onClick="showGrapes();" />
<input type="submit" value="Strawberries" onClick="showStrawberries();" />