javascript - Embedded style overriding inline styles? -


I have an embedded style and a function button that changes the style of the button to display through inline style Has: No problem is that embedded style is being overridden inline style. So, the questions are:

  • Is inline styles not considered more priority than embedded? Is there anything wrong with my code ??

If nothing is wrong with my code:

  • How do I get to embed my inline code embedded style?

HTML

  & lt; Div id = "buttonDiv1" style = "float: left;" & Gt; & Lt; Button ID = "BTN1" & gt; Change unit & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div id = "buttonDiv1" style = "float: left; display: none;" & Gt; Button ID = "BTN 2" & gt; Change unit & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div id = "buttonDiv1" style = "float: left; display: none;" & Gt; Button ID = "BTN3" & gt; Change unit & lt; / Button & gt; & Lt; / Div & gt; & Lt; Input id = "text" style = "float: left;" & Gt; & Lt; / Input & gt; & Lt; Div onChange = "jsfunction ()" & gt; & Lt; Div style = "float: left" & gt; Type: & lt; Select ID = "Type selector" & gt; & Lt; Option value = "" disabled disabled style = "display: none;" & Gt; & Lt; / Options & gt; & Lt; Option value = "1" & gt; Instrumental Cables & lt; / Options & gt; & Lt; Option value = "2" & gt; Vertical piping material & lt; / Options & gt; & Lt; Option value = "3" & gt; Electric Cables & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "container" class = "cont" style = "min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto" & gt; & Lt; / Div & gt;  

JS

  function jsfunction () {// from the chart to display var var = document.getElementById ("typeSelector") get receive; If (val.value == 1) {document.getElementById ("btn1") Style.display = "block"; . Document.getElementById ("btn2") style.display = "none"; . Document.getElementById ("btn3") style.display = "none"; } And if (val.value == 2) {document.getElementById ("btn1"). Style.display = "none"; Document.getElementById ("btn2") style.display = "block". . Document.getElementById ("btn3") style.display = "none"; } And {document.getElementById ("btn1"). Style.display = "none"; . Document.getElementById ("btn2") style.display = "none"; Document.getElementById ("btn3") style.display = "block". }}  

To display JSFiddle problem:

EDIT: It appears that there was a problem with my demo code, so I pasted the actual code

I removed the extra divas and their float layout and used the display: inline; On your button, they can not break the line:

Sorry, the HTML must be pasted here, otherwise I can not add a Bella:

  

It should be what you want.


Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -