Supposed to insert entered text between input field and send button, but it does noting.
<body>
<section>
<p>passcode: <input type=text id=passcode></p>
<section id=middle></section>
<p><input type=button id=button value=send></p>
</section>
<script type="text/javascript">
var log=new Array();
document.getElementById("button").onclick=exlog();
exlog(){
log.push(document.getElementById("passcode").value)
for(i=0;i<log.length;i++){
document.getElementById("middle").innerHtml=log[i];
}
}
</script>
</body>
Change
document.getElementById("middle").innerHtml=log[i];
to
document.getElementById("middle").innerHTML=log[i];
Reference: https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML
Your exlog function is missing the function keyword and you are setting the onclick handler incorrectly.
Also innerHtml should be innerHTML
document.getElementById("button").onclick=exlog;
function exlog(){
log.push(document.getElementById("passcode").value)
for(i=0;i<log.length;i++){
document.getElementById("middle").innerHTML=log[i];
}
I noticed a couple of problems with your code. Most importantly, you should use innerHTML, not innerHtml (note capitalization).
Additionally, you need to be careful of how you deal with functions. Just putting exlog(){} will not create a function. Instead, you should use the function keyword.
Finally, you want to set the onclick handler to the function exlog. What you have used will actually set the onclick handler to the result of evaluating the exlog function.
Here's a solution with all of the suggested changes:
<body>
<section>
<p>passcode: <input type=text id=passcode></p>
<section id=middle></section>
<p><input type=button id=button value=send></p>
</section>
<script type="text/javascript">
var log=new Array();
document.getElementById("button").onclick=exlog;
function exlog(){
log.push(document.getElementById("passcode").value)
for(i=0;i<log.length;i++){
alert(log[i]);
document.getElementById("middle").innerHTML=log[i];
}
}
</script>
</body>
You are evaluating the function by using it like this: exlog(), since exlog doesn't have a return statement, it evaluates to undefined, which the browser won't execute.
If you want to assign it you can just use it's name exlog
Also, as mentioned by Teemu and Musa, the function keyword was missing from the definition of exlog
Also, the capitalization of innerHTML has to be exact, mixing cases wont work.
<body>
<section>
<p>passcode: <input type=text id=passcode></p>
<section id=middle></section>
<p><input type=button id=button value=send></p>
</section>
<script type="text/javascript">
var log = [];
document.getElementById("button").onclick = exlog; // <== no need to evaluate the function, just assign it.
function exlog(){ // <== as pointed out below function keyword was missing
log.push(document.getElementById("passcode").value);
document.getElementById("middle").innerHTML += log[log.length - 1]; // <== needs to be capitilized exactly like this
}
</script>
</body>
Related
in my site i have google reCaptcha component which allows me to specify a callback function inside the attribute "data-callback".
this is my html file:
<html>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
var txtClientResponse = document.getElementById('txtClientResponse');
var txtServerResponse = document.getElementById('txtServerResponse');
function successCallback(value) {
this.txtClientResponse.value = value;
this.txtServerResponse.innerText.clear();
}
</script>
<body>
<div class="g-recaptcha" data-callback="successCallback" data-error-callback="errorCaptcha" data-sitekey="xxxxxx" />
<input ID="txtClientResponse" />
<input ID="txtServerResponse" />
</body>
Everything works great except the fact that i can not access the local variable txtClientResponse, that holds a DOM element, from the callback function "successCallback". to local variables like var test = 1, i can access using this.test.
i tried to pass the "this" using like i am doing on Angular but it didn't work. i need a pure javascript solution - not angular:
<div class="g-recaptcha" data-callback="successCallback.bind(this)" data-error-callback="errorCaptcha" data-sitekey="xxxxxx"/>
I didn't use pure JavaScript for long time because i am using Angular, i forgot that the script tag with the javascript code should be at the very bottom of the body tag content or at least to assign the variables with the getElementById inside the document.onreadystatechange event.
The problem was that the lines:
var txtClientResponse = document.getElementById('txtClientResponse');
var txtServerResponse = document.getElementById('txtServerResponse');
executed before the HTML elements where ready.
Here is the fix for users that may find this question using google
<html>
<body>
<div class="g-recaptcha" data-callback="successCallback" data-error-callback="errorCaptcha" data-sitekey="xxxxxx" />
<input ID="txtClientResponse" />
<input ID="txtServerResponse" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
var txtClientResponse = document.getElementById('txtClientResponse');
var txtServerResponse = document.getElementById('txtServerResponse');
function successCallback(value) {
this.txtClientResponse.value = value;
this.txtServerResponse.innerText.clear();
}
</script>
</body>
</html>
I have tried to call the function using window.onload but it works only when I place it body tag as below but when I place it in the head tag (commented out) it doesn't work though the function gets called (I have put an alert and checked.)
<!DOCTYPE html5>
<html>
<head>
<script>
function onl()
{
var x=document.forms[0].elements[0].name;
document.write(x);
}
//window.onload = onl();
</script>
</head>
<body>
<form name=usern>
<input type = "text" name ="username">
<input type = "password" name ="password">
<input type ="submit" name="sybmitb">
</form>
<script>
window.onload = onl();
</script>
<div id = "txt">
</div>
</body>
</html>
It doesn't run in the head because the brackets used after the assignment cause the function to immediately be run. That mean it causes an error because the document hasn't loaded yet and so causes the form elements to be undefined.
In the head, if you change
window.onload = onl();
to
window.onload = onl;
Then it will work.
You must pass the handler function to document.load (or window.load), not the return of your function. So use document.onload = onl; instead of document.onload = onl(); (see more here : https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload)
So in result :
<!DOCTYPE html5>
<html>
<head>
<script>
function onl()
{
var x=document.forms[0].elements[0].name;
document.write(x);
}
document.onload = onl;
</script>
</head>
<body>
<form name=usern>
<input type = "text" name ="username">
<input type = "password" name ="password">
<input type ="submit" name="sybmitb">
</form>
<div id = "txt">
</div>
</body>
</html>
Regards,
Julien Q.
Edit : Sorry I misread before ;)
When you assign a function like that, you need to be sure not to invoke it. When you put parentheses on the end of a function name, it will be invoked immediately even if it's being assigned to something like the window's load event.
So, you simply have to replace onl() with onl:
window.onload = onl;
As for why it works in the body, it's because the document has pretty much finished loading when it gets to the end of the body.
Assigning onl() to the window's onload property isn't erroneous because you're assigning the return value of onl(), which is undefined, to window.onload.
Also, I'd recommend not using window.onload but document.onload, because document.onload is fired when the DOM is ready, not when the files requested are ready.
I am trying to pass a particular variable value from the script tag to an input tag. But somehow it is not working.
I am trying to pass variable1 value from the below code from script tag to input tag.
So suppose variable1 value is John then this line in my code will look like this-
<input ONCLICK="window.location.href='some_url&textId=John'">
Below is the code
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
// some code
}
var variable1 = getUrlVars()["parameter1"];
var variable1 = unescape(variable1);
// some more code
</script>
<input ONCLICK="window.location.href='some_url&textId=variable1'">
</body>
</html>
Can anyone explain me what wrong I am doing?
Try it that way:
var variable1 = getUrlVars()["parameter1"];
variable1 = unescape(variable1);
document.getElementById('Apply').onclick = function() {
window.location.href = 'some_url&textID=' + variable1;
};
That attaches a function to the onclick event that exactly does what you want. For the initial input element simply remove the onclick attribute:
<input name="Apply" type="button" id="Apply" value="Apply" />
If you wish to perform inline functions, you need to wrap the code in an executable closure:
<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="(function() {window.location.href='your_data'})();">
As this can be largely unmaintainable, I recommend you abstract this functionality into a more organized place in your application.
(function(window, $, undefined) {
// assuming you use jQuery
$('#Apply').click(function() {
window.location.href = '';// your code
})
})(window, $);
I may be totally misunderstanding what you want to do, but I hope this helps.
The whole url parameters bit is surely unnecessary.
You can just set the value attribute in the field:
var field = document.getElementById('textfield');
var value = 'Some text';
field.addEventListener("click", function () {
this.setAttribute('value', value);
});
Here's a jsfiddle example: http://jsfiddle.net/LMpb2/
You have it inside the ' ' you need to add it into the string. So try
"window.location.href='some_url&textId='+variable1+';'"
I would change it to the following if your trying to bind the click handler to this input element:
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
// some code
}
var variable1 = getUrlVars()["parameter1"];
var variable1 = unescape(variable1);
document.getElementById("Apply").onclick = function() {
window.location.href='some_url&textId=' + variable1;
}
// some more code
</script>
<input name="Apply" type="button" id="Apply" value="Apply" >
</body>
</html>
I haven't tested it yet but it should work.
at onclick call a function, inside that function set window.locatio.href !
a sample
<script>
var url="www.google.com";
function myfunc(){
alert(url);
}
</script>
<input type="button" onclick="myfunc()" value="btn" >
http://jsfiddle.net/CgKHN/
I'm stuck on what seems like a trivial issue and I'm probably gonna kick myself for missing this..Anyway, my issue is I'm failing to get the value from a text field.
HTML:
<form>
<label for="">Enter Username:</label>
<input id="usernameText" type="text" size="30" />
<input type="button" value="Generate" onclick="generateQuery(); return false;" />
</form>
Javascript:
<script type="text/javascript">
var username = $("#usernameText").val();
function generateQuery(){
alert(username);
}
</script>
I did the following if (jQuery) {.. and made sure JQuery is loaded.
In the alert it displays an empty dialog box.
If I included the $(document).ready(); into my script the function generateQuery does not get called. Any idea why..?
<script type="text/javascript">
$(document).ready(function(){
var username = $("#usernameText").val();
function generateQuery(){
alert(username);
}
});
</script>
Assign your variable within the function.
function generateQuery(){
var username = $("#usernameText").val();
alert(username);
}
As for your other question, "If I included the $(document).ready(); into my script the function generate does not get called. Any idea why..?"
This happens because of scope. You wrap generateQuery inside an anonymous function when you add a document.ready handler, and therefore it's not visible to your button onclick="generateQuery()" code.
Here it will call while the page is loading.So whenever the page is loading the text box is empty.Try to write within a function.
function generateQuery(){
var username = $("#usernameText").val();
alert(username);
}
When you write in document.ready it will cal;l while the page is loading.If you need the value of username then call explicitly.
The value is being derived the first time through. So when the page is first loaded.
<script type="text/javascript">
function generateQuery(){
var username = $("#usernameText").val();
alert(username);
}
</script>
Here you are defining the function you have to call the function in order to get it run use this generateQuery(); line to call your function.
where are you calling the function????
i think you need:
<script type="text/javascript">
$(document).ready(function(){
generateQuery();
});
function generateQuery(){
var username = $("#usernameText").val();
alert(username);
}
</script>
I have a number of links, that when clicked on, passes a variable thru to another portion of the page.
Yet, for some reason, I can’t figure it out! What am I missing?
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
return myid;
}
</script>
</head>
<body>
Click Me<br />
<script type="text/javascript">
document.write(myid);
</script>
</body>
You are getting a little mixed up here. Even though the function returns a value, it has nothing to return it to. Try this:
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
document.getElementById("debug").innerHTML = myid;
}
</script>
</head>
<body>
Click Me<br />
<div id="debug"></div>
</body>
if you want to use it later you need to declare myid as a global variable. its scope is currently only within myFunction. also the document.write() function will only execute at runtime so you need to have another function the executes that with every click, or just combine the two.
When you click the link all that happens is that the myFunction() is called which returns the string. The line document.write(myid); is not executed anymore so nothing is visible.
<script>
// This is global
var myid = ''
myfunc = function(a){
myid = "Hi There!" + a;
alert(myid);
}
test_global = function(){
alert(myid);
}
</script>
Set MYID
<input type="button" onclick="test_global();" value="Test MYID" />
Here is a simple example of some similar stuff:
clickme or ClickMeAlso
<input id='other' type='text'/>
<script>
function myfunc(a) {
return a + " howdy";
};
</script>
You can see this in action here:http://jsfiddle.net/5Sbn2/