Html Question posted in
Some basic documentation can be found here.

Html – I want to make buttons which anabel the next button, but something doesnt work?

I have wroten the html script here:
It should make a row of buttons which when you click on the first the second shows and when you click on that the next third shows…
Has anyone an Idea why it is not working?
And yes, i know it is messy.

<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>

I tryed replacing every single line of code with the code i have writen in an other document and that worked out there. But it would work here for some reason. I know, that the last button wont work, but not even the first one shows the second. Any ideas on how to fix it?

Tags:

2

Answers


  1. 0

    Your functions have the same name has the constants you define above, as hinted by the error Uncaught SyntaxError: redeclaration of const b you should see in the console.

    Removing the constants definitions and changing your functions as follows is one way to make your page work :

    function a(){
    document.getElementById("b").hidden = false;
}
    Login or Signup to reply.
  2. 0

    Don’t repeat yourself. Use a class for your buttons instead and a single function.
    Use modulo (reminder) operator to loopback to 0 when necessary.
    Also, don’t use inline on* handlers like onclick. Use addEventListener instead:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search