Need help with conditions in JS!

0 Radek Vlcek · April 28, 2015
Hi, I have 5 buttons and one text below it. 3 buttons change its color, 4th one gives it a border and 5th one erases a border.
But I want 4th button to work like this: If text has red color and I click border button, border has to be same color so red. And the same thing with other 2 colors. I have put it in conditions but cannot really make it work, please help and reply with working piece of code and explain it too. Thanks!

html:

    <input type="button" value="Red" id="butty1"/>
    <input type="button" value="Blue" id="butty2"/>
    <input type="button" value="Green" id="butty3"/>
    <input type="button" value="Border" id="butty_border"/>
    <input type="button" value="Border_off" id="butty_border_off"/>
    <p id="text">This is some text.</p>



js:

function main(){
    x = document.getElementById('butty1');
    xx = document.getElementById('butty2');
    xxx = document.getElementById('butty3');
    but_bord = document.getElementById('butty_border');
    but_bord_off = document.getElementById('butty_border_off');
    y = document.getElementById('text');

    x.addEventListener('click', function changeToRed(){y.style.color='red';}, false);
    xx.addEventListener('click', function changeToBlue(){y.style.color="blue";}, false);
    xxx.addEventListener('click', function changeToYellow(){y.style.color="green";},false);
    but_bord.addEventListener('click', makeBorder, false);
    but_bord_off.addEventListener('click', function BorderOff(){y.style.border="0px solid red";},false);
}
function makeBorder(){
    if(x.clicked==true){
    y.style.border="2px solid red";
    y.style.width="200px";
    }
    else if(xx.clicked==true){
    y.style.border="2px solid blue";
    y.style.width="200px";
    }
    else if(xxx.clicked==true){
    y.style.border="2px solid yellow";
    y.style.width="200px";
    }
    
}    
window.addEventListener('load', main, false);


Post a Reply

Replies

Oldest  Newest  Rating
0 Bill Harding · May 28, 2015
css

.borderOn{
    border:2px solid black;
}
.borderOff{
    border:none;
}


html






This is some text.


js

function main(){
    x = document.getElementById('butty1');
    xx = document.getElementById('butty2');
    xxx = document.getElementById('butty3');
    but_bord = document.getElementById('butty_border');
    but_bord_off = document.getElementById('butty_border_off');
    y = document.getElementById('text');
 
    x.addEventListener('click',            function(){ y.style.color='red';  y.style.borderColor='red';   }, false);
    xx.addEventListener('click',           function(){y.style.color="blue";  y.style.borderColor='blue';  }, false);
    xxx.addEventListener('click',          function(){y.style.color="green"; y.style.borderColor='green'; },false);
    but_bord.addEventListener('click',     function(){y.className='borderOn' }, false);
    but_bord_off.addEventListener('click', function(){y.className='borderOff'},false);
}

window.addEventListener('load', main, false);



jsfiddle
https://jsfiddle.net/b80ewjj2/
0 Bill Harding · May 28, 2015
My html is the same as yours. I can't edit my post.

The style overrides the class so the class just turn the border on and off. The style sets the color whether it's visible or not.
0 Ali Hassan · May 16, 2015





   
    
       
        
   
    
   
    
    sdagafg
    Click me!

   

// This is the button element
    var changeBorder = document.getElementById('changeBorder');

// This is the text element that will have the effect
    var txt = document.getElementById('H');

//binding the event
    changeBorder.addEventListener("click" , function(){
// here we set the border style to 2px size of solid style and the text
// element's original color.....this will cause the border to be of the same
// color as the text.
    txt.style.border = "2px solid " + txt.style.color;

    } , false);

   

   
    
  • 1

Javascript

106,948 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators