asp.net - Javascript is not working for "onchange" event in a dropdown inside a <div> section with "id" -
i have dropdownlist <select> onchange="prueba();" javascript event.
this dropdown inside <div>. <div> has id= receives complex (at least, me) javascript event, ".js" file. complex event affects <select>, giving different behaviour default. want conserve different behaviour.
problem:
this <div> id "blocks" onchange="prueba();" event in dropdown.
if take out id, event works fine, loose behaviour .js file, , don't want miss that.
question:
im not used javascript. that's why can't find how fix this. me?
my event:
function prueba() { var lista = document.getelementbyid("listabotones"); var cambio1 = document.getelementbyid("cambio"); var cambio = cambio1.options[cambio1.selectedindex].text; var cosa1 = document.getelementbyid("cosa"); var cosa = cosa1.options[cosa1.selectedindex].text; if (cambio == "create") { if (cosa == "lpar") { lista.children[1].style.display = 'inline'; lista.children[2].style.display = "none"; lista.children[3].style.display = "none"; lista.children[4].style.display = "none"; lista.children[5].style.display = "none"; lista.children[6].style.display = "none"; lista.children[7].style.display = "none"; lista.children[8].style.display = "none"; lista.children[9].style.display = "none"; } if (cosa == "dealer") { lista.children[1].style.display = "none"; lista.children[2].style.display = "none"; lista.children[3].style.display = "none"; lista.children[4].style.display = 'inline'; lista.children[5].style.display = "none"; lista.children[6].style.display = "none"; lista.children[7].style.display = "none"; lista.children[8].style.display = "none"; lista.children[9].style.display = "none"; } if (cosa == "batch") { lista.children[1].style.display = "none"; lista.children[2].style.display = "none"; lista.children[3].style.display = "none"; lista.children[4].style.display = "none"; lista.children[5].style.display = "none"; lista.children[6].style.display = "none"; lista.children[7].style.display = 'inline'; lista.children[8].style.display = "none"; lista.children[9].style.display = "none"; } } if (cambio == "modify") { if (cosa == "lpar") { lista.children[1].style.display = "none"; lista.children[2].style.display = 'inline'; lista.children[3].style.display = "none"; lista.children[4].style.display = "none"; lista.children[5].style.display = "none"; lista.children[6].style.display = "none"; lista.children[7].style.display = "none"; lista.children[8].style.display = "none"; lista.children[9].style.display = "none"; } if (cosa == "dealer") { lista.children[1].style.display = "none"; lista.children[2].style.display = "none"; lista.children[3].style.display = "none"; lista.children[4].style.display = "none"; lista.children[5].style.display = 'inline'; lista.children[6].style.display = "none"; lista.children[7].style.display = "none"; lista.children[8].style.display = "none"; lista.children[9].style.display = "none"; } if (cosa == "batch") { lista.children[1].style.display = "none"; lista.children[2].style.display = "none"; lista.children[3].style.display = "none"; lista.children[4].style.display = "none"; lista.children[5].style.display = "none"; lista.children[6].style.display = "none"; lista.children[7].style.display = "none"; lista.children[8].style.display = 'inline'; lista.children[9].style.display = "none"; } } if (cambio == "delete") { if (cosa == "lpar") { lista.children[1].style.display = "none"; lista.children[2].style.display = "none"; lista.children[3].style.display = 'inline'; lista.children[4].style.display = "none"; lista.children[5].style.display = "none"; lista.children[6].style.display = "none"; lista.children[7].style.display = "none"; lista.children[8].style.display = "none"; lista.children[9].style.display = "none"; } if (cosa == "dealer") { lista.children[1].style.display = "none"; lista.children[2].style.display = "none"; lista.children[3].style.display = "none"; lista.children[4].style.display = "none"; lista.children[5].style.display = "none"; lista.children[6].style.display = 'inline'; lista.children[7].style.display = "none"; lista.children[8].style.display = "none"; lista.children[9].style.display = "none"; } if (cosa == "batch") { lista.children[1].style.display = "none"; lista.children[2].style.display = "none"; lista.children[3].style.display = "none"; lista.children[4].style.display = "none"; lista.children[5].style.display = "none"; lista.children[6].style.display = "none"; lista.children[7].style.display = "none"; lista.children[8].style.display = "none"; lista.children[9].style.display = 'inline'; } } } div in aspx form:
<div id="nl-form" class="nl-form" style="text-align: center"> want <select id="cambio" onchange="prueba();"> <option value="1" selected>create </option> <option value="2">modify </option> <option value="3">delete </option> </select> <select id="cosa" onchange="prueba();"> <option value="1" selected>lpar</option> <option value="2">dealer</option> <option value="3">batch</option> </select> definition. </div> script (in aspx file):
<script src="../js/nlform.js"></script> <script> var nlform = new nlform(document.getelementbyid('nl-form')); </script> nlform.js file:
; ( function (window) { 'use strict'; var document = window.document; if (!string.prototype.trim) { string.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');}; } function nlform( el ) { this.el = el; this.overlay = this.el.queryselector( '.nl-overlay' ); this.fields = []; this.fldopen = -1; this._init(); } nlform.prototype = { _init : function() { var self = this; array.prototype.slice.call( this.el.queryselectorall( 'select' ) ).foreach( function( el, ) { self.fldopen++; self.fields.push( new nlfield( self, el, 'dropdown', self.fldopen ) ); } ); array.prototype.slice.call( this.el.queryselectorall( 'input' ) ).foreach( function( el, ) { self.fldopen++; self.fields.push( new nlfield( self, el, 'input', self.fldopen ) ); } ); this.overlay.addeventlistener('click', function (ev) { self._closeflds(); }); this.overlay.addeventlistener( 'touchstart', function(ev) { self._closeflds(); } ); }, _closeflds : function() { if( this.fldopen !== -1 ) { this.fields[ this.fldopen ].close(); } } } function nlfield( form, el, type, idx ) { this.form = form; this.eloriginal = el; this.pos = idx; this.type = type; this._create(); this._initevents(); } nlfield.prototype = { _create : function() { if( this.type === 'dropdown' ) { this._createdropdown(); } else if( this.type === 'input' ) { this._createinput(); } }, _createdropdown : function() { var self = this; this.fld = document.createelement( 'div' ); this.fld.classname = 'nl-field nl-dd'; this.toggle = document.createelement( 'a' ); this.toggle.innerhtml = this.eloriginal.options[ this.eloriginal.selectedindex ].innerhtml; this.toggle.classname = 'nl-field-toggle'; this.optionslist = document.createelement( 'ul' ); var ihtml = ''; array.prototype.slice.call( this.eloriginal.queryselectorall( 'option' ) ).foreach( function( el, ) { ihtml += self.eloriginal.selectedindex === ? '<li class="nl-dd-checked">' + el.innerhtml + '</li>' : '<li>' + el.innerhtml + '</li>'; // selected index value if( self.eloriginal.selectedindex === ) { self.selectedidx = i; } } ); this.optionslist.innerhtml = ihtml; this.fld.appendchild( this.toggle ); this.fld.appendchild( this.optionslist ); this.eloriginal.parentnode.insertbefore( this.fld, this.eloriginal ); this.eloriginal.style.display = 'none'; }, _createinput : function() { var self = this; this.fld = document.createelement( 'div' ); this.fld.classname = 'nl-field nl-ti-text'; this.toggle = document.createelement( 'a' ); this.toggle.innerhtml = this.eloriginal.getattribute( 'placeholder' ); this.toggle.classname = 'nl-field-toggle'; this.optionslist = document.createelement( 'ul' ); this.getinput = document.createelement( 'input' ); this.getinput.setattribute( 'type', 'text' ); this.getinput.setattribute( 'placeholder', this.eloriginal.getattribute( 'placeholder' ) ); this.getinputwrapper = document.createelement( 'li' ); this.getinputwrapper.classname = 'nl-ti-input'; this.inputsubmit = document.createelement( 'button' ); this.inputsubmit.classname = 'nl-field-go'; this.inputsubmit.innerhtml = 'go'; this.getinputwrapper.appendchild( this.getinput ); this.getinputwrapper.appendchild( this.inputsubmit ); this.example = document.createelement( 'li' ); this.example.classname = 'nl-ti-example'; this.example.innerhtml = this.eloriginal.getattribute( 'data-subline' ); this.optionslist.appendchild( this.getinputwrapper ); this.optionslist.appendchild( this.example ); this.fld.appendchild( this.toggle ); this.fld.appendchild( this.optionslist ); this.eloriginal.parentnode.insertbefore( this.fld, this.eloriginal ); this.eloriginal.style.display = 'none'; }, _initevents : function() { var self = this; this.toggle.addeventlistener( 'click', function( ev ) { ev.preventdefault(); ev.stoppropagation(); self._open(); } ); this.toggle.addeventlistener( 'touchstart', function( ev ) { ev.preventdefault(); ev.stoppropagation(); self._open(); } ); if( this.type === 'dropdown' ) { var opts = array.prototype.slice.call( this.optionslist.queryselectorall( 'li' ) ); opts.foreach( function( el, ) { el.addeventlistener( 'click', function( ev ) { ev.preventdefault(); self.close( el, opts.indexof( el ) ); } ); el.addeventlistener( 'touchstart', function( ev ) { ev.preventdefault(); self.close( el, opts.indexof( el ) ); } ); } ); } else if( this.type === 'input' ) { this.getinput.addeventlistener( 'keydown', function( ev ) { if ( ev.keycode == 13 ) { self.close(); } } ); this.inputsubmit.addeventlistener( 'click', function( ev ) { ev.preventdefault(); self.close(); } ); this.inputsubmit.addeventlistener( 'touchstart', function( ev ) { ev.preventdefault(); self.close(); } ); } }, _open : function() { if( this.open ) { return false; } this.open = true; this.form.fldopen = this.pos; var self = this; this.fld.classname += ' nl-field-open'; }, close : function( opt, idx ) { if( !this.open ) { return false; } this.open = false; this.form.fldopen = -1; this.fld.classname = this.fld.classname.replace(/\b nl-field-open\b/,''); if( this.type === 'dropdown' ) { if( opt ) { // remove class nl-dd-checked previous option var selectedopt = this.optionslist.children[ this.selectedidx ]; selectedopt.classname = ''; opt.classname = 'nl-dd-checked'; this.toggle.innerhtml = opt.innerhtml; // update selected index value this.selectedidx = idx; // update original select element´s value this.eloriginal.value = this.eloriginal.children[ this.selectedidx ].value; } } else if( this.type === 'input' ) { this.getinput.blur(); this.toggle.innerhtml = this.getinput.value.trim() !== '' ? this.getinput.value : this.getinput.getattribute( 'placeholder' ); this.eloriginal.value = this.getinput.value; } } } // add global namespace window.nlform = nlform; } )( window );
may not write script after </body>, so, when page load on script, there have not defined dom object "nl-form" , "cambio" , "cosa"
Comments
Post a Comment