I need to fade out row when a specific select value is selected (let's say "termination"). Fade in, when any other is selected. Code works fine with div ID outside the table, but when div is encapsulated with tr & td (put into table), it stops to work. I tried my luck with tbody ID, but no luck. Please help me with pure javascript. My brain somehow does not like jQuery. But I think the function for fading is fine, I just need to make it work with a row in the table.
Here is my code:
<table> <tr> <td>Select Type:</td> <td> <select name="vipselect" onchange="fade('vipselect','agencyrow')" > <option value="0" selected value="0" selected> Please Select </option> <option value="fastL4">ltm virtual V10.112.x.x_any (Fast L4)</option> <option value="passthrough">ltm virtual Vx.x.x.x_443 (Standard)</option> <option value="termination"> ltm virtual Vx.83.x.x_443 (Standard) </option> </select> </td> </tr> <tr> <td>test:</td> <td><input name="other" type="othertext" /></td> </tr> <tbody> <tr> <td>test:</td> <td><input name="sslcert" type="text" /></td> //this row to fade/unfade </tr> </tbody> </table> javascript:
function f_fade(parent, elm) { var x = document.getElementById("vipselect"); if (x.options[x.selectedIndex].value == "termination") { document.getElementById(elm).style.display = "block"; f_fade_in(0, elm); } else { f_fade_out(100, elm); } } function f_fade_out(para, elm) { document.getElementById(elm).style.opacity = para / 100; var t1 = setTimeout(function () { if (para > 0) { f_fade_out(para - 1, elm); } else { document.getElementById(elm).style.display = "none"; } }, 1); } function f_fade_in(para, elm) { document.getElementById(elm).style.opacity = para / 100; var t1 = setTimeout(function () { if (para < 100) f_fade_in(para + 1, elm); }, 1); } 2 Answers
As I stated above, don't use tables for layout. You only need to use block level elements to create new lines of information in your page. Also, don't use inline HTML event attributes - - do all your event binding in JavaScript.
Now, all you need to do here is to apply CSS Transitions to the element that should be faded.
const message = document.getElementById("message"); // Set up your events in JavaScript, not in HTML document.getElementById("select").addEventListener("change", function(){ if(this.value === "Show"){ message.classList.remove("hidden"); } else { message.classList.add("hidden"); } });#message { transition:opacity 1.5s ease; /* Sets up CSS transitioning */ opacity:1; /* CSS properties that should be transitioned must have a defined initial value*/ } #message.hidden { opacity:0; }<label for="select">Select Type:</label> <select> <option selected>Please Select</option> <option>Show</option> <option>Hide</option> </select> <div> <label for="other">Text: </label> <input> </div>Use this below:
const message = document.getElementById("message"); function getValue(id) { const optionValue = document.getElementById(id).value; if (optionValue == "0") { message.style.display = "none"; } else if (optionValue == "1") { message.style.display = "block"; } }#message { display: none; }<div> <label for="vipselect">Select Type:</label> <select onchange="getValue('vipselect')"> <option value="null" selected>Please Select</option> <option value="0">No</option> <option value="1">Yes</option> <option value="0">No</option> </select> </div> <div> <label for="other">Text: </label> <input name="other"/></td> </div>
