-1

I am new so please forgive me if I sound stupid.

So I am trying to make it so on mouse out the button disables. Here is what I tried so far: (Thanks in advance!)

function alertonclick() {
  alert("You got me! GG. At least I tried.");
}    
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}      

    addEvent(document, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
          document.getElementById("button").disabled = true;
                document.getElementById("button").value = "BUTTON IS DISABLED";
                document.getElementById("button").style.background='808080';

                }
    });

HTML

<button id="button" tabindex="-1" onclick="alertonclick()" class="Rainbow buttonmove notouch button1 btn">Button</button>
BLUBBER
  • 93
  • 1
  • 10

2 Answers2

0

Ok, first your entire addEvent function is not needed unless you suspect that you may have users using Internet Explorer 8! All browsers since IE 9 (1995) support .addEventListener().

You also don't need: e = e ? e : window.event; for the same reason.

Next, you shouldn't be using inline HTML event attributes like onclick as they are a legacy approach to working with events from 25+ years ago and only persist today because people just see someone else use them and copy/paste them without understanding why they shouldn't be used. Separate your JavaScript from your HTML and use .addEventListener() which you actually do use in your addEvent function.

You're attempt at setting the color isn't right because you didn't add "#" in front of the hex code, which identifies it as a hexadecimal color.

Finally, if you want to be able to interact with the button when the mouse goes back over it, then you really don't want to disable the button (because then you wouldn't fire a mouseover event when the mouse went back to it).

So really, much of your code isn't needed. The essence is this:

const btn = document.getElementById("button")

btn.addEventListener("mouseout", function(e) {
  this.textContent = "BUTTON IS DISABLED";
  this.classList.add("disabled");
});

btn.addEventListener("mouseover", function(e) {
  this.textContent = "BUTTON ENABLED";
  this.classList.remove("disabled");
});
.disabled { background-color:#808080; }
<button id="button" tabindex="-1" class="Rainbow buttonmove notouch button1 btn">Button</button>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • I wanted the button to disable and turn grey when the mouse leaves and for it to also turn grey. Not onclick! – BLUBBER Apr 30 '21 at 17:58
  • @SamiOsman You are not being clear. You've said that you do want to interact with it when the mouse is over it, so it has to be clickable. – Scott Marcus Apr 30 '21 at 18:03
  • No, I didn't say that! I said on mouse leave/mouseout button to disable and (optional) turn grey, – BLUBBER Apr 30 '21 at 18:05
  • @SamiOsman In the comments above, you said "Like I want to disable when the mouse leaves, ***then re-enable it when the mouse comes back***." – Scott Marcus Apr 30 '21 at 18:06
  • Yes, this is better but (I hope I'm not too much) for it to re-enable not on hover but on re-enter – BLUBBER Apr 30 '21 at 18:08
  • @SamiOsman The issue is that if you disable the button, then moving the mouse back over it later will not cause the `mouseover` event to fire (because it's disabled), so you can't re-enable it that way. And, when you re-enter, you are hovering. – Scott Marcus Apr 30 '21 at 18:12
  • So, what you are saying is that when you leave it you don't want it to be interactive, but when you come back to it you do. That's exactly what my answer shows. There's no need to formally disable it, only style it because when you leave it, you can't click it, so you don't have to worry about disabling it. – Scott Marcus Apr 30 '21 at 18:14
  • I meant when you go to the address bar, or right-click the button disables. but when you stop right-clicking the button is enabled. If you do not understand let us discuss this in the chat. – BLUBBER Apr 30 '21 at 18:22
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231799/discussion-between-scott-marcus-and-sami-osman). – Scott Marcus Apr 30 '21 at 18:23
-1

Try this:

var button = document.getElementById('button');
button.addEventListener('mouseleave', function () {
button.setAttribute('disabled', 'disabled');
});

No jquery needed :-)

mpdoctor
  • 74
  • 5
  • Is there a way to make it so the color changes? And when the cursor comes back for the color to change back and the button not disabled anymore? – BLUBBER Apr 30 '21 at 17:46
  • Well, if you want to reactivate the button after the cursor is back on it, then what's the point of disabling it? If you just want its color to change, then css is sufficient for this: `#button {background-color: #333; color: #fff;} #button:hover {background-color: #eee; color: #333;}` *example colors used just to show the change – mpdoctor Apr 30 '21 at 17:50
  • Like I want to disable when the mouse leaves, then re-enable it when the mouse comes back. The color change was optional just for a trick. Do you understand? – BLUBBER Apr 30 '21 at 17:51
  • if so, duplicate my example code, and replace the event with 'mouseenter' and `setAttribute('disabled', 'disabled')` call with `removeAttribute('disabled')` :) – mpdoctor Apr 30 '21 at 17:55