Issue With Input Button
Solution 1:
Actually when you click on the input button it returns the target.id as blank because it doesn't have id but when you click on form(just near to button) it will display proper id.
So what you can do is use currentTarget.id or this.id
See the difference between target and currentTarget: What is the exact difference between currentTarget property and target property in javascript
Check the below snippet in full page.
toggle();
window.onresize = function() {
toggle();
}
functiontoggle() {
var searchTop = document.getElementById('demo-1');
if (window.innerWidth <= 1080) {
document.getElementById('demo-2').addEventListener('click', function(evt) {
var target = evt.target;
console.log("target = "+evt.target.id)
console.log("currentTarget ="+evt.currentTarget.id)
if (this.id === 'demo-2') {
document.getElementById('demo-1').style.display = 'inherit';
}
}, true);
} elseif (window.innerWidth > 1080) {
document.getElementById('demo-1').style.display = 'none';
}
}<formid="demo-1"><inputtype="search"name="buscar"placeholder="Search"></form><formid="demo-2"><inputtype="submit"name="search"placeholder="Search"></form>Solution 2:
I don't know if this works for you, but here it is:
// external.js//<![CDATA[var pre = onload, doc, bod, htm, E; // change var pre if using technique on more that this page
onload = function(){
if(pre)pre(); // handle previous onload
doc = document; bod = doc.body; htm = doc.documentElement;
E = function(id){
return doc.getElementById(id);
}
var out = E('output'), ipt = E('input');
functionsolution(){
var iS = ipt.style, oS = out.style;
if(innerWidth < 1081){
iS.display = 'inline-block'; oS.display = 'block';
out.innerHTML = ipt.value;
}
else{
iS.display = oS.display = 'none';
}
}
onresize = ipt.onblur = E('btn').onclick = solution;
doc.forms[0].onsubmit = function(){
returnfalse;
}
}
//]]>/* external.css */#output,#input{
display:none;
}<!DOCTYPE html><htmlxmlns='http://www.w3.org/1999/xhtml'xml:lang='en'lang='en'><head><metahttp-equiv='content-type'content='text/html;charset=utf-8' /><linktype='text/css'rel='stylesheet'href='external.css' /><scripttype='text/javascript'src='external.js'></script></head><body><formmethod='post'action='#'name='form'><inputtype='text'id='input'placeholder='search' /><inputtype='button'id='btn'value='Search' /><divid='output'></div></form></body></html>Solution 3:
This is what I was looking for, but there is still an issue... when I click on the submit button on screen less than 1080px it shows the search input like what I was looking for, that's ok, but when I resize the screen to more than 1080px (without refreshing the code) and I click on the submit button again it shows the input search even when the code says on window.innerWidth > 1080 to display none the input...
My question is, how do I return display:none on screen more than 1080px when I had the screen on less than that?
toggle();
window.onresize = function() {
toggle();
}
functiontoggle() {
var searchTop = document.getElementById('demo-1');
if (window.innerWidth <= 1080) {
document.getElementById('demo-2').addEventListener('click', function(evt) {
document.getElementById('demo-1').style.display = 'inherit';
}, false);
document.getElementById('demo-3').addEventListener('blur', function(evt) {
document.getElementById('demo-1').style.display = 'none';
}, false);
} elseif (window.innerWidth > 1080) {
document.getElementById('demo-1').style.display = 'none';
}
}#demo-1 {
display: none;
}<formid="demo-1"><inputid="demo-3"type="search"name="buscar"placeholder="Search"></form><formid="demo-2"><inputtype="submit"name="search"placeholder="Search"></form>Solution 4:
You should insert the conditionals inside the click functions. I recommend you check CSS media queries to assign certain styles depending on the screen size.
window.onresize = function() {
if (window.innerWidth > 1080) {
document.getElementById('demo-1').style.display = 'none';
}
}
var searchTop = document.getElementById('demo-1');
document.getElementById('demo-2').addEventListener('click', function(evt) {
if (window.innerWidth <= 1080) {
document.getElementById('demo-1').style.display = 'inherit';
}
}, false);
document.getElementById('demo-3').addEventListener('blur', function(evt) {
if (window.innerWidth <= 1080) {
document.getElementById('demo-1').style.display = 'none';
}
}, false);#demo-1 {
display: none;
}<formid="demo-1"><inputid="demo-3"type="search"name="buscar"placeholder="Search"></form><formid="demo-2"><inputtype="submit"name="search"placeholder="Search"></form>
Post a Comment for "Issue With Input Button"