CODEWITHSUNDEEP
javascripthtmlinline
Genome314
Genome314

Reputation: 505

Embedded style overriding inline styles?

So I have a button with embedded style and a function that changes the button's style via inline style to display:none. Problem is the embedded style seems to be overriding the inline style. So, the questions are:

If there isn't anything wrong with my code:

HTML

<div id="buttonDiv1" style="float:left;"><button id="btn1">Change units</button></div>
<div id="buttonDiv1" style="float:left; display:none;"><button id="btn2">Change units</button></div>
<div id="buttonDiv1" style="float:left; display:none;"><button id="btn3">Change units</button></div>
<input id="text" style="float:left;"></input>

<div onChange="jsfunction()">
<div style="float: left">Type: <select id="typeSelector">
  <option value="" disabled selected style="display:none;"></option>
  <option value="1">Instrumental Cables</option>
  <option value="2">Erected Piping Materials</option>
  <option value="3">Electric Cables</option>
</select>
    </div></div>

<div id="container" class="cont" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

JS

    function jsfunction(){
//Get from user which chart to display
var val = document.getElementById("typeSelector");

if(val.value==1){
document.getElementById("btn1").style.display="block";
document.getElementById("btn2").style.display="none";
document.getElementById("btn3").style.display="none";
}
else if(val.value==2){
document.getElementById("btn1").style.display="none";
document.getElementById("btn2").style.display="block";
document.getElementById("btn3").style.display="none";
}
else{
document.getElementById("btn1").style.display="none";
document.getElementById("btn2").style.display="none";
document.getElementById("btn3").style.display="block";
}
}

JSfiddle to demonstrate the problem: http://jsfiddle.net/4T4pb/1/

Edit: It appears there was a problem with my demo code so I affixed the actual code

Upvotes: 1

Views: 245

Answers (2)

Brunis
Brunis

Reputation: 1063

I removed the excess div's and their float layout and used display: inline; on your buttons, so they don't break the line:

Sorry, have to paste html here, otherwise i can't link a fiddle:

<button id="btn1">Change units</button>
<button id="btn2" style="display: none;">Change units</button>
<button id="btn3" style="display: none;">Change units</button>
<input id="text"></input>

http://jsfiddle.net/4T4pb/2/

That should be what you are looking for.

Upvotes: 1

saghar.fadaei
saghar.fadaei

Reputation: 3383

function func(){
    document.getElementById("change").stlye.display="none !important";
}

Upvotes: 1

Related Questions