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! Quote 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. Quote 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)"; }; }; Quote 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 (edited) 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> Edited November 16, 2013 by newprogrammingfan Quote Link to comment https://forums.phpfreaks.com/topic/283969-always-change-color-on-click/#findComment-1458584 Share on other sites More sharing options...
Solution Irate Posted November 16, 2013 Solution 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)"; }; }; Quote 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
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.