我想制作一个可以显示下一个按钮的按钮，但是有些东西不起作用？

问题描述 投票：0回答：1

我在这里写了html脚本： 它应该制作一排按钮，当您单击第一个按钮时，第二个按钮将显示，当您单击下一个按钮时，第三个按钮将显示...... 有谁知道为什么它不起作用？ 是的，我知道这很乱。

<html>
    <head>
        <title>Enough buttons</title>
    </head>
    
    <body>
        <input type="button" value="Click me" onClick="a()" id="a">
        <input type="button" value="Click me" onClick="b()" id="b" hidden>
        <input type="button" value="Click me" onClick="c()" id="c" hidden>
        <input type="button" value="Click me" onClick="d()" id="d" hidden>
        <input type="button" value="Click me" onClick="e()" id="e" hidden>
        <input type="button" value="Click me" onClick="f()" id="f" hidden>
        <input type="button" value="Click me" onClick="g()" id="g" hidden>
        <input type="button" value="Click me" onClick="h()" id="h" hidden>
        <input type="button" value="Click me" onClick="i()" id="i" hidden>
        <input type="button" value="Click me" onClick="j()" id="j" hidden>
        <input type="button" value="Click me" onClick="k()" id="k" hidden>
        <input type="button" value="Click me" onClick="l()" id="l" hidden>
        <input type="button" value="Click me" onClick="m()" id="m" hidden>
        <input type="button" value="Click me" onClick="n()" id="n" hidden>
        <input type="button" value="Click me" onClick="o()" id="o" hidden>
        <input type="button" value="Click me" onClick="p()" id="p" hidden>
        <input type="button" value="Click me" onClick="q()" id="q" hidden>
        <input type="button" value="Click me" onClick="r()" id="r" hidden>
        <input type="button" value="Click me" onClick="s()" id="s" hidden>
        <input type="button" value="Click me" onClick="t()" id="t" hidden>
        <input type="button" value="Click me" onClick="u()" id="u" hidden>
        
<script>
    
const b = document.getElementById("b");
const c = document.getElementById("c");
const d = document.getElementById("d");
const e = document.getElementById("e");
const f = document.getElementById("f");
const g = document.getElementById("g");
const h = document.getElementById("h");
const i = document.getElementById("i");
const j = document.getElementById("j");
const k = document.getElementById("k");
const l = document.getElementById("l");
const m = document.getElementById("m");
const n = document.getElementById("n");
const o = document.getElementById("o");
const p = document.getElementById("p");
const q = document.getElementById("q");
const r = document.getElementById("r");
const s = document.getElementById("s");
const t = document.getElementById("t");
const u = document.getElementById("u");

function a(){
    b.hidden = false;
}

function b(){
    c.hidden = false;
}

function c(){
    d.hidden = false;
}

function d(){
    e.hidden = false;
}

function e(){
    f.hidden = false;
}

function f(){
    g.hidden = false;
}

function g(){
    h.hidden = false;
}

function h(){
    i.hidden = false;
}

function i(){
    j.hidden = false;
}

function j(){
    k.hidden = false;
}

function k(){
    l.hidden = false;
}

function l(){
    m.hidden = false;
}

function m(){
    n.hidden = false;
}

function n(){
    o.hidden = false;
}

function o(){
    p.hidden = false;
}

function p(){
    q.hidden = false;
}

function q(){
    r.hidden = false;
}

function r(){
    s.hidden = false;
}

function s(){
    t.hidden = false;
}

function t(){
    u.hidden = false;
}

function u(){
    
}


        </script>
    </body>
</html>

我尝试用我在其他文档中编写的代码替换每一行代码，并且在那里解决了。但由于某种原因它在这里会起作用。我知道，最后一个按钮不起作用，但即使第一个按钮也不会显示第二个按钮。关于如何修复它有什么想法吗？

javascript html button
1个回答
0
投票

您的函数具有相同的名称，并且具有您上面定义的常量，正如您应该在控制台中看到的错误

Uncaught SyntaxError: redeclaration of const b
所暗示的那样。

删除常量定义并更改函数，如下所示是使页面正常工作的一种方法：

function a(){
    document.getElementById("b").hidden = false;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.