Good day!
Why is it that when I make the following javascript code external, some codes doesn't work
<form name="Keypad" action="">
</form>
var FKeyPad = document.Keypad; // DOESN'T WORK ANYMORE
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
How can I make it work?
Thank you,
It has nothing to do with the code being external, it's all about when the code is executed.
You have to execute the code after the element has been created. You can put the script tag below the element in the code, or you can put the code in the handler for the window.onload event to make it run after the page has loaded:
window.onload = function() {
// your code here
};
Include your external JS file just before </body> tag and should work.
I can't find any sources which mention document.Keypad. I don't think it's supported by normal browsers.
Related
Java script in Html is as follows.
$(document).ready(function () {
var found = {{.found}}
window.alert("hiiii");
if (foundRecords==true) {
document.getElementById("abc").style.display = "block";
}
return
});
This should get loaded during the time of html loading. But it's not at all loading. I didn't find anything wrong in this simple peace of code.
if you want to get elements with class found {{.found}}
window.onload = function()
{
var found = document.getElementsByClassName("found");
if (found) {
document.getElementById("abc").style.display = "block";
}
}
If you use jQuery to load that function it will take a slight change:
$(document).ready(function () {
// get the class found and assign it to a variable found
var found = $('.found') // it was {{.found}} producing an error
window.alert("hiiii");
// where does foundRecords come from? it is up to you to clear this
if ( foundRecords == true ) {
document.getElementById("abc").style.display = "block";
}
// what is the return good for?
// it would be better to return true or false
// or leave it away
return;
});
Check the jsFiddle:
http://jsfiddle.net/bx0e18L4/
Now it alerts the message, but still has the problem with the variable foundRecords. Take care for that.
EDIT:
According to your comments above the variable foundRecords should be found, so the critical line should be:
if ( found == true ) { // processing }
I have a few javascript routines that I need to run with my application. When I run the application and go to view source, I see the javascript file import, and when I click on it, I am taken to the javascript file, so I know it is being brought down to the client. Right now, I have a simple alert in the beginning of the method I am calling, but that isn't even happening, so I'm not sure what's going on.
Does this look like the correct way to call the javascript when the button is clicked?
<p><input type="button" value="Add File" onclick="go();" /></p>
Here is the javascript file:
var typeAId= 0;
var typeBId= 0;
function addNewDocument(parentId, elementTag, elementId, html) {
// Adds an element to the document
var p = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('id', elementId);
newElement.innerHTML = html;
p.appendChild(newElement);
}
function go(){
alert('ok');
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
function addNewDocument(input) {
var fileToRemove = 'file-';
alert('ok');
var elementName = null;
if(input === 'formAInput'){
elementName = 'formA[]';
typeAId++;
fileToRemove = fileToRemove+typeAId;
} else {
elementName = 'formB[]';
typeBId++;
fileToRemove = fileToRemove+typeBId;
}
var html = '<input type="file" name="'+elementName+'" /> ' +
'Remove';
if(input === 'formAInput'){}
addElement('typeAFilesDiv', 'p', 'file-' + typeAId, html);
} else {
addElement('typeBFilesDiv', 'p', 'file-' + typeBId, html);
}
alert('end');
}
Here is how I am importing the javascript:
<script src="/js/myJS.js"></script>
The js directory is located under the 'war' directory in my Google App Engine Project.
When I click the button, I do not see an alert.
Additional documentation, code, and screenshots would help the community answer more holistically. However, to answer your most basic question, yes, that is the correct way to use the onclick attribute.
I hypothesize that the JavaScript addFile function is not doing what you want it to or something is wrong with the document.ready event.
Externally loading a script, but my script was placed by the client above jQuery (which is a requirement), as such, my script does not work.
I am trying to make my code wait until jQuery has loaded before executing, but I am having difficulty with nested functions within my code; specifically $(x).hover, or $(x).click etc.
I can separate my functions without much trouble, which include jQuery selectors (but they won't be called unless 'x y or z' is done (i.e. until after jQuery is loaded).
I don't know how to have the hover, click etc implemented as they don't work within my $(document).ready(function(){... which is located within the onload yourFunctionName described below - with thanks to user #chaos
Link to onload hook: https://stackoverflow.com/a/807997/1173155
and a quote of the above link:
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
yourFunctionName();
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
Thanks in advance for any help with this.
I have also looked into a loop that checks if jQuery is activated before continueing, but did not implement it as I found that JavaScript does not have a sufficient sleep method that sleeps that specific script.
Solution:
if(typeof jQuery === "undefined"){
if(window.attachEvent) {
window.attachEvent('onload', myLoadFunction);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
myLoadFunction();
};
window.onload = newonload;
} else {
window.onload = myLoadFunction;
}
}
}
else {
myLoadFunction();
}
<script type="text/javascript">
$(document).ready(function() {
alert("test");
document.getElementById("currentemp").onclick = disableThem;
});
function disableThem(){
if (document.getElementById("currentemp").checked) {
document.getElementById("edate_m").disabled = true;
document.getElementById("edate_y").disabled = true;
}
else {
document.getElementById("edate_m").disabled = false;
document.getElementById("edate_y").disabled = false;
}
}
$(function(){
alert("test2");
if (document.getElementById("currentemp").checked) {
document.getElementById("edate_m").disabled = true;
document.getElementById("edate_y").disabled = true;
}
else {
document.getElementById("edate_m").disabled = false;
document.getElementById("edate_y").disabled = false;
}
});
</script>
Hello. This script was working a few weeks ago. Now I noticed it stopped working even though I havent changed it. Usually when my javascript stops working its because I have tons of javascript and sometimes the functions cross over each other. But I've put in alert boxes and it seems it doesnt even load as it should.
Any ideas for debugging?
Put your custom function before document.ready, just in case.
You do not need two ready functions.
Make sure the elements are available in your page and the selectors are valid.
Here is your simplified code:
function disableThem() {
var state = $("#currentemp").is(":checked");
$("#edate_m").attr("disabled", state);
$("#edate_y").attr("disabled", state);
}
$(function() {
disableThem();
$("#currentemp").onclick = disableThem;
});
you example works for me see: http://jsfiddle.net/manuel/KXCM3/
Are you sure that jquery is loaded? Is the following code true?
alert(jQuery !== undefined);
I wrote some html/css/javascript code that was taken verbatim from a javascript textbook. For some reason, the code does not run correctly in my browser (which is the newest version of Firefox). When I click the button, the javascript function "toggleStyle()" does not execute in the browser at ALL. This is the code for the button:
<button type="button" onclick="toggleStyle()">Toggle Style</button>
This is the javascript coding. Note that when I click the button, not even the alert() method is executed:
function toggleStyle() {
alert("toggleStyle() is working.");
var divMessage = document.getElementById("divMessage");
if (divMessage.className === "message-style1") {
divMessage.className = "";
}
else {
divMessage.className = "message-style1";
}
Did you put the code inside <script type="text/javascript">?
<script type="text/javascript">
function toggleStyle() {
alert("toggleStyle() is working.");
var divMessage = document.getElementById("divMessage");
if (divMessage.className === "message-style1") {
divMessage.className = "";
}
else {
divMessage.className = "message-style1";
}
}
</script>
The above code is working:
For starters, I don't see the end } brace; do you have one?
Also, where is the function defined? Does the script get loaded? Are there any errors?