please help here: the if condition always return true though it is false??
these are the html code for variable div and variable your at the beginning
(<div class="div" id="div" style="background:yellow"></div>)
(<input type="text" id="your">)
$(document).ready(function generate() {
"use strict";
var x = $(".2").text(Math.floor((Math.random() * 10))),
z = $(".3").text(Math.floor((Math.random() * 10)));
$(".div").text(x.text() + z.text());
});
var show = document.getElementById("show"),
your = document.getElementById("your").value,
div = document.getElementById("div").textContent;
show.onclick = function () {
"use strict";
if (your == div) {
alert("yes");
} else {
alert("noo");
}
};
The problem is, that you are defining the values outside of the function. So in the onclick handler you are comparing the initial values.
If you want the actual values, you should access the values inside the function:
var show = document.getElementById("show"),
your = document.getElementById("your"),
div = document.getElementById("div");
show.onclick = function () {
if (your.value == div.textContent) {
alert("yes");
} else {
alert("noo");
}
};
Related
I have an object with a function inside of it but i can't get the function to execute on click
This is the fiddle https://jsfiddle.net/tgxu7rpv/23/
and this is the code
$(document).ready(function () {
MyObject = {
ae: function(clicked_id) {
var items = JSON.parse(localStorage.getItem('entry'));
if (items == null || typeof items !== 'object') {
items = [];
}
var entry = {
'num': clicked_id
};
items.push(entry);
localStorage.setItem('entry', JSON.stringify(items));
alert(localStorage.getItem('entry'));
var fromStorage = localStorage.getItem('entry');
for (var data in fromStorage) {
alert("Value" + fromStorage[data]);
}
}
};
$(document).on('click', '.btn-primary', function(){
$('.table tbody').append('<tr class="child"><td>one</td><td><button id="num" onClick="MyObject.ae(this.id);" type="button" class="invite ">Invite</button></td></tr>');
});
});
I can't call the function onClick="MyObject.ae(this.id);"
This issue is a result of one of the default settings in JSFiddle.
You'll need to change one of the javascript settings.
Change the LOAD TYPE setting from:
to:
And that should do the trick!
I have used this function for form validation. I have used this function without
$ function(document).ready(function(){.............});
Its working well. Now I want to add my code under this
$ function(document).ready(function(){.............});
How could I do that. Thanks.
function myFunction () {
var a = document.getElementById("num").value;
var b = document.getElementById("num2").value;
var msg = "";
if(a==""){
msg+="Please Fill this field.\n";
num.className = "color";
}
if(b==""){
msg+="Please Fill this field.\n";
num2.className = "color";
}
if(msg=="") {
return true;
}
else {
document.getElementById("result").innerHTML="Please fill the user name";
document.getElementById("result2").innerHTML="Please Put your E-mail";
return false;
}
}
$(document).ready(function(){ myFunction(); });
My code was working fine but they wanted to change my code....
they wanted to attach setValue and getValue added directly to
footballPanel instead of sports grid,
but after adding it the code is not working fine...
can you tell me why its not working....
providing my modified code below...
the UI action here I am performing is there are two radio buttons,
when I click each radio button two different grids open
in one of the grid we add value, when i switch back to another radio
button the values in another grid disappears but it should not
disappear...
after I modified the code the values disappear, can you tell me why?
Only part of modified code here
else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue();
sportsGrid.addCls("sports-item-disabled");
}
}
Whole modified code:
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
**if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue();
sportsGrid.addCls("sports-item-disabled");
}**
}
},
Working code without modification
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
sportsGrid.holdValue = sportsGrid.store.data.items;
sportsGrid.store.loadData([]);
sportsGrid.addCls("sports-item-disabled");
}
}
},
getValue() is not a method of ExtJS Panel class.
The change in your code, from sportsGrid (Ext.grid.Panel) to footbalPanel (Ext.panel.Panel) won't work, because they are from different classes and therefore have different properties and methods.
If you want this code to work, you'll need to implement getValue() and setValue(). For example, something like:
On FootballPanel class:
getValue: function () {
return this.down('grid').store.data.items;
},
setValue: function (newValue) {
if (!newValue)
newValue = new Array();
this.down('grid').store.loadData(newValue);
},
And use your modified code:
sportsContainerHandler: function(radioGroup, newValue, oldValue, options) {
var sportsCustomParams = options.sportsCustomParams;
var uiPage = this.up('football-ux-sports-ui-page');
var SportsDefinition = metamodelsHelper.getSportsDefinition(
uiPage, sportsCustomParams.SportsHandlerDefinitionId);
var sportsFieldParam = SportsDefinition.params['sportsMultiFieldName'];
var sportsGrid = uiPage.queryById(sportsFieldParam.defaultValue).grid;
if (newValue[radioGroup.name] == 'sportss') {
this.setDisabled(false);
this.removeCls("sports-item-disabled");
if (sportsGrid.holdValue) {
var footballPanel = sportsGrid.up('panel');
footballPanel.setValue(sportsGrid.holdValue);
}
} else {
this.setDisabled(true);
this.addCls("sports-item-disabled");
if (sportsGrid.store.getCount() > 0) {
var footballPanel = sportsGrid.up('panel');
footballPanel.holdValue = footballPanel.getValue();
footballPanel.setValue([]);
sportsGrid.addCls("sports-item-disabled");
}
}
},
I am tryingto get the parent of nodes. I tried these.
Ist Approach:
function update(currentElement) {
document.getElementById("nodeNameField").value = currentElement.nodeName;
document.getElementById("nodeTypeField").value = currentElement.nodeType;
document.getElementById("nodeValueField").value = currentElement.nodeValue;
}
function nodeMove(direction) {
switch (direction)
{
case "parentNode": if (nodeMove.currentElement.parentNode)
nodeMove.currentElement = nodeMove.currentElement.parentNode;
else
alert("No parent");
}
update(nodeMove.currentElement);
}
window.onload = function () {
document.getElementById("parentBtn").onclick = function () {nodeMove("parentNode")};
nodeMove.currentElement = document.documentElement; // HTML
update(nodeMove.currentElement);
}
Since the current element is HTML, when i click on the parent button, I do get #document as it's parent.
2nd approach:
if (document.createTreeWalker) {
function myFilter(n) {
return NodeFilter.FILTER_ACCEPT;
}
var myWalker = document.createTreeWalker(document.documentElement,NodeFilter.SHOW_ALL,myFilter, false);
} else
alert("Error: Browser does not support DOM Traversal");
function update(currentElement) {
window.document.testform.nodeName.value = currentElement.nodeName;
window.document.testform.nodeType.value = currentElement.nodeType;
window.document.testform.nodeValue.value = currentElement.nodeValue;
}
var currentElement = myWalker.currentNode;
//var currentElement = document.documentElement;
update(currentElement);
</script>
<form>
<input type="button" value="Parent" onclick="myWalker.parentNode();update(myWalker.currentNode);">
In the 2nd case, i am unable to get the parent of HTML. How will I resolve it? Any suggestions?
If you declare myWalker inside if scope, it won't be visible for outer/global scope. Move declaration over this scope like here:
var myWalker;
if (document.createTreeWalker) {
function myFilter(n) {
return NodeFilter.FILTER_ACCEPT;
}
myWalker = document.createTreeWalker(document.documentElement,NodeFilter.SHOW_ALL,myFilter, false);
} else
alert("Error: Browser does not support DOM Traversal");
function update(currentElement) {
window.document.testform.nodeName.value = currentElement.nodeName;
window.document.testform.nodeType.value = currentElement.nodeType;
window.document.testform.nodeValue.value = currentElement.nodeValue;
}
Im trying to capture the keyup on all input fields on a page.
My current code is:
var els = document.querySelectorAll('input');
for (var i = 0; i < els.length; i += 1) {
addEvent('keyup', els[i], makeHandler(els[i]));
}
function makeHandler(field) {
console.log(field.value);
}
function addEvent(evnt, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(evnt,func,false);
} else if (elem.attachEvent) {
elem.attachEvent("on"+evnt, function(e) {
e = e || window.event;
if (!e.preventDefault) {
e.preventDefault = preventDefaultOnIE;
}
func.call(this, e);
});
} else { // No much to do
elem[evnt] = func;
}
}
But for some reason its only capturing the value on page load, not once i begin to type in any of the fields.
Any ideas what I'm doing wrong?
The problem is with your makeHandler function. makeHandler(els[i]) is being evaluated and the return value (undefined, in this case) is being passed to addEvent as a handler. Try:
function makeHandler(field) {
return function() {
console.log(field.value);
};
}
This way, makeHandler(els[i]) will return a function that addEvent can then attach to keyup.
Alternatively, you could also just use:
function makeHandler() {
console.log(this.value); // 'this' will be the field that the event occurred on
}
and then use:
addEvent('keyup', els[i], makeHandler);
Side-note
I noticed a slight error in your code:
else { // No much to do
elem[evnt] = func;
}
I think you really want to set elem["on" + evnt] instead.
I like to embed the script in a function so I can minimize it in my IDE and turn it on and off globally. In other words, give it a name.
attachKeyupListenerToInputElements();
function attachKeyupListenerToInputElements(){
var inputs = doc.querySelectorAll('input');
for (var i = 0; i < inputs.length; i += 1) {
inputs[i].addEventListener("keyup", keyupHandler);
}
function keyupHandler() {
console.log(this.value);
}
}
Is this what you are looking for:
<script>
$(document).ready(function () {
$("input").keyup(function () {
alert("keyup");
});
});
</script>