CODEWITHSUNDEEP
javascript
Sailo1
Sailo1

Reputation: 57

To get alert message, if color dialog was closed without change in color selection (warning: colorDialog.style.display = "none";)

This is the code on js fiddle for tests https://jsfiddle.net/em7yfa12/

And also code is here: But as first let me explain what code does. And then I will tell what I need to achieve. I can not find the way by myself. That's why I am asking here for the solution.

When "Open input element to insert text " button is pressed prompt element appears to get text, which will be later painted to the color which was selected in color dialog. But this event will happen only when color will be changed, because the event is triggered from change in color dialog.

This is all regular. But I need something extra and that is:

If color dialog was opened and no change in color was performed before dialog was closed, then I need to get:

alert("You have to select a different color than any of colors you have selected in previous cases to paint the text");

 <input type="button" id="newlabelID" value="Open input element to insert text  "/></br>
 <input type="color" id="colorDialogID" ></br>
 <a id="aID"> Text to paint</br>

var someText;
function createStatusF(){ 

 someText  = prompt("Enter some text :", ""); 

   if ((someText=="")||(someText==null)){       
      return;
   }


 document.getElementById("colorDialogID").focus();
  document.getElementById("colorDialogID").value = "#FFCC00";
  document.getElementById("colorDialogID").click();

 }

document.getElementById("newlabelID").onclick = createStatusF;
document.getElementById("colorDialogID").style.display = "none";

function peintTheText(){
document.getElementById("aID").innerHTML= someText;
var theColor=document.getElementById("colorDialogID").value;
document.getElementById("aID").style.color=theColor;
}
document.getElementById("colorDialogID").onchange = peintTheText;

Upvotes: 1

Views: 272

Answers (1)

Skaparate
Skaparate

Reputation: 489

You need to use the input event and attach it to the color input. This works, but it's not a good idea to use alert with the color picker, since the color picker will have a higher z index than the alert, hence the user will not be able to click it.

Here's the JS code:

let someText;
let previousColors = [];
let colorDialog = document.getElementById("colorDialogID");

function openColorPicker() {
  colorDialog.focus();
  colorDialog.value = "#FFCC00";
  colorDialog.click();
}

function createStatusF() {

  someText = prompt("Enter some text :", "");

  if ((someText == "") || (someText == null)) {
    return;
  }
  openColorPicker();
}

document.getElementById("newlabelID").onclick = createStatusF;
document.getElementById("colorDialogID").style.display = "none";

function peintTheText() {
  var theColor = colorDialog.value;
  previousColors.push(theColor);
  document.getElementById("aID").innerHTML = someText;
  document.getElementById("aID").style.color = theColor;
}

function onColorSelected(e) {
  const theColor = colorDialog.value;
  if (previousColors.includes(theColor)) {
    alert("You have to select a different color than any of colors you have selected in previous cases to paint the text");
  }
}

colorDialog.addEventListener('input', onColorSelected);
colorDialog.addEventListener('change', peintTheText);

Working Fiddle

Upvotes: 1

Related Questions