Event capturing phase is not working as expected on html element which don't have children nodes

Issue Lets consider following html <div id=’outer’> Outer Tag <div id=’inner’>Inner Tag</div> </div> Applying events var outer = document.getElementById(‘outer’), inner = document.getElementById(‘inner’); outer.addEventListener(‘click’,function(){ console.log(‘Outer Clicked!’) }, false); outer.addEventListener(‘click’,function(){ console.log(‘Outer Captured!’) }, true); // event capture flag set to true inner.addEventListener(‘click’,function(){

Continue reading

JavaScript CSS styling in IE

Issue JavaScript CSS styling not working in IE, it is working in Chrome and Mozilla. This is my code: document.ready=function() { var val = document.getElementById("registration_select").value; if(val =="Relay – Ultra, Standard and Sprint distances (Men / Women/ Mixed) – open to

Continue reading

Can't get width property with JavaScript

Issue My idea is when I click on the button, the div#x will lose 1% of width. Here is my code: document.querySelector(‘#a’).onclick = function() { var lost = document.querySelector(‘#x’).style.width, lost = lost.slice(0, -1); lost = Number(lost); lost -= 1; document.querySelector(‘#x’).style.width

Continue reading

Cannot click input element within button element

Issue Take a look at the below markup & fiddle: http://jsfiddle.net/minlare/oh1mg7j6/ <button id=”button” type=”button”> <span id=”test” style=”background:pink;”>test element</span> Add File <input type=”file” name=”file” multiple=”multiple” id=”upload”> </button> In Chrome, each element within the button can be selected through the developer console

Continue reading

Javascript resize event faulty

Issue I don’t know why this doesn’t work: window.addEventListener(‘load’, setSize(), false); window.addEventListener(‘resize’, setSize(), false); function setSize(){ width = window.innerWidth; console.log(width); } It logs the width right after load, but it doesn’t do that when I resize. Solution Instead of executing

Continue reading

JavaScript flow or execution

Issue If I have a JS function as follows; function testFn() { x.ajaxMethod(param1,JScallBackFunction); //Please do not worry about the syntax..this just indicates an external method call alert("Line after ajaxMethod"); } The ajaxMethod(), lets say is some kind of method defined

Continue reading

JavaScript check all and uncheck all for checkbox

Issue <script type="text/javascript"> function checkAll(formname, checktoggle) { var checkboxes = new Array(); checkboxes = document[formname].getElementsByTagName(‘input’); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type === ‘checkbox’) { checkboxes[i].checked = checktoggle; } } } </script> <form name="myform"> <li>

Continue reading

Using variable in setattribute function in JavaScript

Issue Displaying NoN instead of city name. I have tried following code: <script type="text/javascript" language="javascript" > function submitcity(c){ document.getElementById("ct").setAttribute(‘value’,+c);//displaying NoN //document.cityform.submit(); alert(c); }</script> In body: <img src="images/reset.jpg" width="80" height="24" onclick="submitcity(‘bhopal’);" /> <form action="" method="post" name="cityform" style="display:none;"> <input type="hidden" name="city" id="ct"

Continue reading

Avoid duplicate record from dropdown Javascript PHP

Issue I have a code like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Eg – Textbox Dropdown</title> </head> <body> <input name="TextboxExample" type="text" maxlength="50" id="TextboxExample" tabindex="2" onchange="DropDownIndexClear(‘DropDownExTextboxExample’);" style="width: 242px; position: absolute;

Continue reading

How can I run a function with an unavailable DOM object?

Issue I want to run a function to remove a button’s parent element. parent element after getting it with let rem_display_btn1 = document.getElementById(‘rem_display_btn1’); like this let rem_display_btn1 = document.getElementById(‘rem_display_btn1’); rem_display_btn1.addEventListener(‘click’, () => { let parentEl = rem_display_btn1.parentElement.parentElement; parentEl.remove(); }); The

Continue reading

Avoid duplicate record from dropdown Javascript PHP

Issue I have a code like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Eg – Textbox Dropdown</title> </head> <body> <input name="TextboxExample" type="text" maxlength="50" id="TextboxExample" tabindex="2" onchange="DropDownIndexClear(‘DropDownExTextboxExample’);" style="width: 242px; position: absolute;

Continue reading

HTML Element, Custom Client Event

Issue I have a composite control which emits HTML that looks like this <span id=”myControl”> <select id=”myControl_select”> <option value=””></option> <option value=”1″>Item 1</option> <option value=”2″>Item 2</option> </select> </span> I would like the parent span control to fire an event when the

Continue reading

Using variable in setattribute function in JavaScript

Issue Displaying NoN instead of city name. I have tried following code: <script type="text/javascript" language="javascript" > function submitcity(c){ document.getElementById("ct").setAttribute(‘value’,+c);//displaying NoN //document.cityform.submit(); alert(c); }</script> In body: <img src="images/reset.jpg" width="80" height="24" onclick="submitcity(‘bhopal’);" /> <form action="" method="post" name="cityform" style="display:none;"> <input type="hidden" name="city" id="ct"

Continue reading

JavaScript check all and uncheck all for checkbox

Issue <script type="text/javascript"> function checkAll(formname, checktoggle) { var checkboxes = new Array(); checkboxes = document[formname].getElementsByTagName(‘input’); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type === ‘checkbox’) { checkboxes[i].checked = checktoggle; } } } </script> <form name="myform"> <li>

Continue reading

Firebug giving me a syntax error in OnClick function

Issue Here’s my HTML: <input type=’checkbox’ name=’PatientReady1′ value=’Yes’ checked onClick="PatientReady ("PatientReady1","111","PatientReady")"> And my JavaScript: function PatientReady(element, TriageNo, Field){ debugger; if (element.checked == 1){ new Ajax.Request ( "PatientReady.asp", { method: ‘post’, parameters: { TriageNo: TriageNo, strReady: "Yes", strElement: Field }, asynchronous:false

Continue reading

JavaScript onclick() function not working

Issue I have JavaScript code including several functions, the main one being CheckForm(). The function is called by clicking the ‘Submit’ button: <td><input type=”submit” name=”submit1″ id=”submit1″ value=”Register” onclick=”return CheckForm();”/></td> But when the button is pressed nothing happens (the function isn’t

Continue reading