[Solved] Mousehover on JavaScript [closed]

by


You can’t manipulate the buttons on the native prompt/alert/confirm dialogues but you can create your own. Here’s some quick code using “vanilla” JS but it can be done a lot easier with jquery or any other front end framework.

// Helper function to sort of emulate the confirm box
const ask = question => {
  let modal = document.createElement("div");
  let ok = document.createElement("button");
  let cancel = document.createElement("button");
  let div = document.createElement("div");
  let header = document.createElement("div");
  header.style.background = "#7c7c7c";
  modal.style.position = "absolute";
  modal.style.right = "0";
  modal.style.left = "0";
  modal.style.margin = "15px auto 0 auto";
  modal.style.width = "350px";
  modal.style.zIndex = "999999999";
  modal.style.border = "1px solid #a5a5a5";
  modal.style.background = "#bababa";
  modal.style.padding = "3px";
  ok.style.float = "right";
  cancel.style.float = "right";
  header.appendChild(document.createTextNode("Confirm"));
  cancel.appendChild(document.createTextNode("Cancel"));
  div.appendChild(document.createTextNode(question));
  ok.appendChild(document.createTextNode("Ok"));
  modal.appendChild(header);
  modal.appendChild(div);
  modal.appendChild(cancel);
  modal.appendChild(ok);
  document.body.appendChild(modal);
  return {
    ok: ok,
    cancel: cancel,
    close: ()=>modal.parentNode.removeChild(modal)
  };
};

// Create a modal asking if the user loves to fart
let modal = ask("do u <3 2 fart?");

// If the user indicates that they do indeed <3 2 fart
// close the modal and log a message to the console
modal.ok.onclick = ()=>{
  modal.close();
  console.log("u <3 2 fart");
};

// If the user indicates that they do not <3 2 fart
// close the modal and log a message to the console
modal.cancel.onclick = ()=>{
  modal.close();
  console.log("u not <3 2 fart");
};

// If the  user mouses over the ok button, 
// change the text
modal.ok.onmouseover = ()=>
  modal.ok.innerHTML = "&hearts;";
  
// If the  user removes mouse from ok button
// restore the text
modal.ok.onmouseout = ()=>
  modal.ok.innerHTML = "Ok";

// If the  user mouses over the cancel button, 
// change the text
modal.cancel.onmouseover = ()=>
  modal.cancel.innerHTML = "!&hearts;";
  
// If the  user removes mouse from cancel button
// restore the text
modal.cancel.onmouseout = ()=>
  modal.cancel.innerHTML = "Cancel";

lol

3

solved Mousehover on JavaScript [closed]