Hallo, Ik loop tegen een probleem aan. Ik wil graag dat de knopjes van kleur kunnen veranderen zodra je er op klikt en dan als j enog een keer er op klikt dat hij weer wit word. Dit is gelukt. Maar als ik alles heb ingevuld wil ik niet alle kleuren 1 voor 1 terug zetten naar wit hiervoor wil ik een reset knop deze heb ik gemaakt maar als ik hier op klik dan kan ik er niet meteen weer op klikken ik loop hier nu al heel lang tegen aan en dacht ik ga het maar even hier vragen 
Dus in het kort de reset knop van de pagina's werkt niet. Als ik klik dan word het wel wit maar ik kan dan niet wer verder gaan en als ik dan op de reset knop klik dan keert hij weer terug naar voordat ik op de reset knop klik.
Alvast bedankt voor de hulp.
Als het niet duidelijk is zeg het dan a.u.b. dan kan ik proberen het nog duidelijker te maken en misschien wat afbeeldingen toevoegen.
Dit is mijn html
Dit is mijn CSS
.white
{
background: white;
}
Dus in het kort de reset knop van de pagina's werkt niet. Als ik klik dan word het wel wit maar ik kan dan niet wer verder gaan en als ik dan op de reset knop klik dan keert hij weer terug naar voordat ik op de reset knop klik.
Alvast bedankt voor de hulp.
Als het niet duidelijk is zeg het dan a.u.b.
dan kan ik proberen het nog duidelijker te maken en misschien wat afbeeldingen toevoegen.Dit is mijn html
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change backgroundcolor</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue"></p>
<p class="blue"></p>
<p class="blue"></p>
<p class="blue"></p>
<p class="blue"></p>
<span id="itm2" onclick="exchange(this);">Vraag</span><input ondblclick="exchange(this);" id="itm2b" class="replace" type="text" value="" >
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
<button id="btn">Reset kleur</button>
<script>
$('#btn').click(function()
{
// $('p').toggleClass('background', 'transparent');
$( "p" ).toggleClass( "white" );
// document.("p").style.backgroundColor="red";
// $("p").style.background="white";
});
</script>
<style type="text/css">
.replace {
display:none;
}
</style>
<script type="text/javascript">
function exchange(el){
var ie=document.all&&!document.getElementById? document.all : 0;
var toObjId=/b$/.test(el.id)? el.id.replace(/b$/,'') : el.id+'b';
var toObj=ie? ie[toObjId] : document.getElementById(toObjId);
if(/b$/.test(el.id))
toObj.innerHTML=el.value;
else{
toObj.style.width=el.offsetWidth+200+'px';
toObj.value=el.innerHTML;
}
el.style.display='none';
toObj.style.display='inline';
}
</script>
</body>
</html>Dit is mijn CSS
Code:
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
background:white;
border: 1px;
border-style: groove;
height:100px;
}
.highlight {
background: blue;
}.white
{
background: white;
}
