newprogrammingfan Posted November 16, 2013 Share Posted November 16, 2013 Hi! I am new at this,so can anyone show or tell me how can i make a text that changes color all the time when i click on it.When first time i click on the black text -> it changes to Red,when i click again it become black again and if i click again it becomes Red and so on,This in a circle.How can i do this? Thanks for the help and please no flaming i am new yet,and didn't found my answer on the net yet... Any help or idea welcome! Link to comment https://forums.phpfreaks.com/topic/283969-always-change-color-on-click/ Share on other sites More sharing options...
Irate Posted November 16, 2013 Share Posted November 16, 2013 Assuming you have an element that looks like this. <span id="colorChange">Clicking this text changes the color of it.</span>Script below. window.onload = function(){ var cc = document.getElementById("colorChange"); if( !cc ) { throw new Error("Element to change color was not found."); } cc.onclick = function(){ if( cc.style.color == "rgb(255,0,0)" ) cc.style.color = "rgb(0,0,0)"; else cc.style.color = "rgb(255,0,0)"; }; };That's about all you need. You could use jQuery and make this a bit more simple and also being able to fire the script without having to wait for images to completely load. Link to comment https://forums.phpfreaks.com/topic/283969-always-change-color-on-click/#findComment-1458578 Share on other sites More sharing options...
newprogrammingfan Posted November 16, 2013 Author Share Posted November 16, 2013 Assuming you have an element that looks like this. <span id="colorChange">Clicking this text changes the color of it.</span>Script below. window.onload = function(){ var cc = document.getElementById("colorChange"); if( !cc ) { throw new Error("Element to change color was not found."); } cc.onclick = function(){ if( cc.style.color == "rgb(255,0,0)" ) cc.style.color = "rgb(0,0,0)"; else cc.style.color = "rgb(255,0,0)"; }; };That's about all you need. You could use jQuery and make this a bit more simple and also being able to fire the script without having to wait for images to completely load. Thanks!But it won't change the color back so i made a modification,but still not works,can anyone help with it? Files and their contents are below-> textcolor.php: <html> <head> <script src="jquerry.js"></script> </head> <body> <span id="colorChange">Clicking this text changes the color of it.</span> </body> </html> jquerry.js: window.onload = function(){ var cc = document.getElementById("colorChange"); var dd = document.getElementById("colorChange"); if( !cc ) cc.onclick = function(){ if( cc.style.color == "rgb(255,0,0)" ) cc.style.color = "rgb(0,0,0)"; }; if( !dd ) dd.onclick = function(){ if( cc.style.color = "rgb(0,0,0)" ) dd.style.color = "rgb(255,0,0)"; }; }; Link to comment https://forums.phpfreaks.com/topic/283969-always-change-color-on-click/#findComment-1458582 Share on other sites More sharing options...
newprogrammingfan Posted November 16, 2013 Author Share Posted November 16, 2013 I tryed with button,but still no succes,some help to a beginner please? <!DOCTYPE html> <html> <head> <script> document.getElementById('change').onclick = changeColor; function changeColor() { if(document.getElementById('color').style.color == "black";) { document.getElementById('color').style.color = "blue"; } else { document.getElementById('color').style.color = "black"; } } </script> </head> <body> <script type="text/javascript"> document.getElementById('color').style.color="black"; </script> <button onclick="changeColor">Color Change</button> <p id="color">Hey there!</p> </body> </html> Link to comment https://forums.phpfreaks.com/topic/283969-always-change-color-on-click/#findComment-1458584 Share on other sites More sharing options...
Irate Posted November 16, 2013 Share Posted November 16, 2013 My bad, I figured out the problem. The elem.style.color property is always noted as rgb value with spaces, I left out the spaces. Below script should work just fine. window.onload = function(){ var cc = document.getElementById("colorChange"); if( !cc ) { throw new Error("Element to change color was not found."); } cc.onclick = function(){ if( cc.style.color == "rgb(255, 0, 0)" ) cc.style.color = "rgb(0, 0, 0)"; else cc.style.color = "rgb(255, 0, 0)"; }; }; Link to comment https://forums.phpfreaks.com/topic/283969-always-change-color-on-click/#findComment-1458591 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.