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

Html – .disabled not working for me when trying to disable a button

I have looked everywhere and everyone says to use objectname.disabled = true but in my project it doesn’t work. Even when asking ChatGTP it says "Huh… should work lol". Please help me out here!

My Code: (I do have a css file however it should not affect .disabled not working so I will not add it here. I will after the fact if deemed necessary though.)

document.addEventListener('DOMContentLoaded', function() {
    var atom_amount = 0;
    var matter_btn = document.getElementById('matter_btn');
    var matter_amount = 0;
    var matter_cost = 10;

    document.getElementById('atoms_btn').onclick = function() {
        atom_amount++
        document.getElementById('atoms_txt').innerHTML = "Atoms: " + atom_amount
        if (atom_amount < matter_cost) {
            matter_btn.disabled = true;
        }
        else {
            matter_btn.disabled = false;
        }
    };

    document.getElementById('matter_btn').onclick = function() {
        atom_amount = atom_amount - matter_cost
        document.getElementById('atoms_txt').innerHTML = "Atoms: " + atom_amount
        matter_amount++
        matter_cost = matter_cost + (2 * matter_amount)
        document.getElementById('matter_txt').innerHTML = "Matter: " + matter_amount
    };
});
<!DOCTYPE html>
<html>
    <head>
        <title>From Scratch</title>
        <link rel="stylesheet" href="css/Style.css">
        <script src="js/main.js"></script>
    </head>
    <body>
        <game_name class="game_title">From Scratch</game_name>
        <shape class="resource_area"></shape>
        <resources_info class="text resources_text">Resources:</resources_info>
        <shape class="divider"></shape>
        <atoms id="atoms_txt" class="text atoms_amount">Atoms: 0</atoms>
        <atoms_button id="atoms_btn" class="button atoms_button">Create Atoms</atoms_button>
        <matter id="matter_txt" class="text matter_amount">Matter: 0</matter>
        <matter_button id="matter_btn" class="button matter_button">Create Matter</matter_button>
    </body>
</html>

I have created a test file and tried .disabled and lo and behold it worked! However as soon as I went back to my main file it did again not work so I am extremely confused.

All I want is for my button to be disabled when certain conditions are met and to be reenabled when those conditions are not met.

Tags:

2

Answers


  1. 0

    you can inspire of this code

     const btn = document.getElementById("btn")
 
 btn.addEventListener("click" ,function(){
      btn.setAttribute('disabled',true)
 })
    Login or Signup to reply.
  2. 0

    The problem is you’ve made up your own HTML tag, matter_button (and some others). Since it’s not a standard element tag, it just has a generic interface (HTMLElement), which doesn’t provide the disabled reflected property that button (HTMLButtonElement) and input (HTMLInputElement) have. If you used button (probably with type="button", redundant as that sounds) or input, disabled would work.

    Here’s your code using button, with some other modernizations and suggestions inline (feel free to ignore them if you like):

    <!-- Updated to use standard element tags -->
<h1 class="game_title">From Scratch</h1>
<div class="resource_area"></div>
<div class="text resources_text">Resources:</div>
<hr>
<div id="atoms_txt" class="text atoms_amount">Atoms: 0</div>
<button type="button" id="atoms_btn" class="button atoms_button">Create Atoms</button>
<matter id="matter_txt" class="text matter_amount">Matter: 0</matter>
<button type="button" id="matter_btn" class="button matter_button">Create Matter</button>
<script type="module">
// No need for `DOMContentLoaded` if you use `type="module"` on the
// `script` element, which I recommend.
// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
// If you don't want to use modules, you could just put the `script`
// tag at the end of the `body`, just before the `</body>`
// end tag

// Prefer the new(ish) `let` and `const` over the old `var`
let atom_amount = 0;
const matter_btn = document.getElementById("matter_btn");
let matter_amount = 0;
let matter_cost = 10;

// Avoid assigning to old-style `onXyz` properties; instead, hook
// up event handlers with `addEventListener` as you had with
// `DOMContentLoaded`
document.getElementById("atoms_btn").addEventListener("click", () => {
    atom_amount++;
    // I haven't changed it, but you might put the count in its own `span`
    // so you didn't have to repeat the `Atoms: ` prefix.
    document.getElementById("atoms_txt").innerHTML = "Atoms: " + atom_amount;
    // You can directly assign the result of the comparison, which is a boolean,
    // to the `disabled` property
    matter_btn.disabled = atom_amount < matter_cost;
});

document.getElementById("matter_btn").addEventListener("click", () => {
    // You can use `-=` and `+=` to subtract/add and assign back to the
    // variable
    atom_amount -= matter_cost;
    document.getElementById("atoms_txt").innerHTML = "Atoms: " + atom_amount;
    matter_amount++;
    matter_cost = matter_cost + 2 * matter_amount;
    document.getElementById("matter_txt").innerHTML =
        "Matter: " + matter_amount;
});
</script>

    That’s just to get you started. I think there are probably still some logic errors in there (I wasn’t sure what the logic should be).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search