CODEWITHSUNDEEP
javascripthtmlcss
Jake Blazer
Jake Blazer

Reputation: 65

How can I add a JavaScript event handler so that when the button is clicked the user will be prompted for a colour?

So I dont exactly know how to do this, I just want someone to tell me how to do the following, cause I have been trying for hours and nothing has been working with me, so if someone can help me, I would truly appreciate it guys.

I want to add a JavaScript event handler so that when the button is clicked the user will be prompted for a colour, and the according to that colour code the user entered, the colour of the box changes according to the user input. 

<script>
var newColor;

function init()
{

    /* Event Handlers */

    document.getElementById('choose').onmouseover = function()
    {
        document.getElementById('choose').style.backgroundColor = "red";
        document.getElementById('choose').style.opacity = "1.0";
    }
    document.getElementById('choose').onmouseout = function()
    {
        document.getElementById('choose').style.opacity = "0.5";
    }
}
window.onload = init;
</script>
style>
body {
    font: 1.2em Verdana, sans-serif;
}
#choose {
	font-size: 1.2em;
	padding: 0.5em;
}
#colorBox {
    text-align: center;
    font-size: 1.5em;
    color: white;
}
</style>
 

<body>
    <h2 id="theOne">Colour Choice</h2>

    <p><button id="choose">Click to enter a colour (code) </button></p>

    <div id="colorBox"> </div>
    
</body>

Example

Upvotes: 0

Views: 73

Answers (1)

Taki
Taki

Reputation: 17654

use EventListener and listen for the click instead of mouseover and use Prompt to get what the user entered then set the style like :

let box = document.querySelector('#colorBox')

document.querySelector('#choose').addEventListener('click', function() {
  let color = prompt('enter color : ')
  box.style.backgroundColor = color
  box.innerText = color
});
body {
  font: 1em Verdana, sans-serif;
}

#choose {
  font-size: 1em;
  padding: 0.2em;
}

#colorBox {
  text-align: center;
  font-size: 1.5em;
  color: white;
  width: 100%;
  padding: 10px 0;
}
<h2 id="theOne">Colour Choice</h2>

<p><button id="choose">Click to enter a colour (code) </button></p>

<div id="colorBox"> </div>

Upvotes: 1

Related Questions