代码之家 › 专栏 › 技术社区 › Moritz Richter

我想做一个按钮来标记下一个按钮,但有什么不起作用吗?

button html javascript

Moritz Richter · 技术社区 · 2 年前

我在这里写了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>

我试着用我在另一个文档中编写的代码替换每一行代码,结果很好。但出于某种原因,它在这里会奏效。我知道,最后一个按钮不起作用,但即使是第一个也不能显示第二个。对如何修复它有什么想法吗?

2 回复 | 直到 2 年前

Roko C. Buljan 2 年前

不要重复自己。为按钮和单个函数使用一个类。
必要时使用模(提醒)运算符环回到0。
另外,不要使用内联 on* 处理程序如 onclick .使用 addEventListener 相反:

const btns = document.querySelectorAll(".btnLoop");
const advance = ({currentTarget: btn}) => {
  let index = [...btns].indexOf(btn);
  btn.hidden = true;                          // Hide current
  btns[++index % btns.length].hidden = false; // Show next and loop
};

btns.forEach((btn) => btn.addEventListener("click", advance));

<button class="btnLoop" type="button">Click me a</button>
<button class="btnLoop" type="button" hidden>Click me b</button>
<button class="btnLoop" type="button" hidden>Click me c</button>
<button class="btnLoop" type="button" hidden>Click me d</button>
<button class="btnLoop" type="button" hidden>Click me e</button>
<button class="btnLoop" type="button" hidden>Click me f</button>
<button class="btnLoop" type="button" hidden>Click me g</button>
<button class="btnLoop" type="button" hidden>Click me h</button>
<button class="btnLoop" type="button" hidden>Click me i</button>
<button class="btnLoop" type="button" hidden>Click me j</button>
<button class="btnLoop" type="button" hidden>Click me k</button>
<button class="btnLoop" type="button" hidden>Click me l</button>
<button class="btnLoop" type="button" hidden>Click me m</button>
<button class="btnLoop" type="button" hidden>Click me n</button>
<button class="btnLoop" type="button" hidden>Click me o</button>
<button class="btnLoop" type="button" hidden>Click me p</button>
<button class="btnLoop" type="button" hidden>Click me q</button>
<button class="btnLoop" type="button" hidden>Click me r</button>
<button class="btnLoop" type="button" hidden>Click me s</button>
<button class="btnLoop" type="button" hidden>Click me t</button>
<button class="btnLoop" type="button" hidden>Click me u (last)</button>

Aaron 2 年前

正如错误所暗示的那样,您的函数与上面定义的常量同名 Uncaught SyntaxError: redeclaration of const b 你应该在控制台中看到。

删除常量定义并按如下方式更改函数是使页面正常工作的一种方法:

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