im trying to change the innerhtml of an element but it keeps reseting back to "ddd" on every click of the button
<form>
<p id="passError">ddd</p>
<button id="submit">Login</button>
</form>
<script type="text/javascript">
document.getElementById("submit").onclick = function(){changeit()};
function changeit()
{
pError = document.getElementById("passError");
pError.innerHTML = ("wrong password");
</script>
First you are missing the } on the function and then with the submit you are submitting the form which you have to prevent. You don't need a wrapper function for the changeit function you may pass it directly to the onclick variable.
<form>
<p id="passError">ddd</p>
<button id="submit">Login</button>
</form>
<script type="text/javascript">
document.getElementById("submit").onclick = changeit;
function changeit(event)
{
event.preventDefault();
pError = document.getElementById("passError");
pError.innerHTML = "wrong password";
}
</script>
You forgot one thing and have another typo mistake:
you forgot the closing curly bracket } at the end of your function changeit() as mentionned by #antyrat;
you want to put directly the string in the innerHTML assignation, not using parenthesis. (see the innerHTML documentation from MDN)
Moreover, you can also pass directly your changeit function instead of using an anonymous function and put your pError in a proper declarated variable. :)
As you are using a <form>, you also need to prevent the default behavior of the submit button by calling the preventDefault() function on the click event in your function.
The following code is working. I corrected these elements and just add some indentation and spacing to have a code more user-friendly.
<form>
<p id="passError">ddd</p>
<button id="submit">Login</button>
</form>
<script type="text/javascript">
document.getElementById("submit").onclick = changeit;
function changeit(evt) {
evt.preventDefault();
var pError = document.getElementById("passError");
pError.innerHTML = "wrong password";
}
</script>
Related
I have a situation where I have a textbox which will be updated with some value and as soon as the textbox gets its value a javascript function will be called. I have tried something but this not working
if (validSubmission) {
User user = new User();
String StatusMessage=user.executeUserTask("_create_","",userBusinessEmailId,userPassword,cityOfBirth,userFirstName,userLastName,userCompanyName,userCompanyAddress,userPhone,"");
if(StatusMessage.equalsIgnoreCase("OK")) {
response.sendRedirect("login.jsp?retMessage="+"Account created sucessfully");
}
else {
//response.sendRedirect("login.jsp?retMessage="+StatusMessage);
responseMsg = "Invalid Domain Entry";
{%>
Redirect();
<%}
}
}
This is the text box where I am getting the value
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
This is the function which I am trying to call
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
Can anyone help, please?
For input type text onchange event will not work try to use onkeyup or onkeydown
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onkeyup="Redirect()">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
</head>
<body>
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
</body>
</html>
You are using selectors based on jQuery so you need to add jQuery library to your page. Please try this.
$(document).ready(function() {
$('#keyToShowInvalidDomain').change(function(){
// Call redirect function
});
}
Above code should work with JQuery.
I am a Bit Beginner In JavaScript. So I need a code about { If we clicked a button a function need to run} more of them suggested this but it still not working ! and I don`t know why? Can you solve it?
if(document.getElementById("btn").clicked == true){
//some code here
console.log("working");
}
<button id=""btn>ClickEvent</button>
Do not use the if. if statement is executed on page load.
Instead, use Onclick() for example :
var data = "";
function clickBtn() {
if(data != "")
document.getElementById("result").innerHTML = "Hello World !";
else
getData();
}
function getData() {
data = "Hello World !";
}
<button onclick="clickBtn()">Click me</button>
<p id="result"></p>
Good question, lets use the an HTML file that references a JavaScript.
So the first file lets call it webpage.html
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" value="save" onclick="save()"></input>
<input type="button" value="display" onclick="print()"></input>
<div id="area"></div>
</body>
</html>
And the second file script.js
function save()
{
StringTest="Hello world";
}
function print()
{
document.getElementById("area").innerHTML=StringTest;
}
The approach might be a little different but this is recommended as you would more control over the elements in the script.
For example:
<input type="button" will tell the script that it is a form input of the type button whose click will call the function print() in the JavaScript
document.getElementById("area")captures the elements that we define from the Document Object Model(DOM)
I want to create a function where returne to page where I come (previously)
This is my code
<div class="row text-center">
<div class="col-md-12">
<input type="submit" value="Назад" onclick="myFunction()" class="btn" />
</div>
</div>
function myFunction() {
var x = document.referrer;
document.getElementById(".btn").innerHTML = x;
}
Where I'm Wrong ?
Try with:
function myFunction() {
window.location = document.referrer;
}
You can also use:
function myFunction() {
window.history.back();
}
To do what you want within a function:
function myFunction() {
window.location = document.referrer;
}
However, you're doing this a little overcomplicated, as this is a typical case where inline JS is a good choice (because it's little code that's specific to this element, and therefore easier to maintain than having to look it up in a seperate script file).
You're also using a submit element where you probably shouldn't (as it's meant to be used to submit a form, which you don't have).
Instead, you can use either a regular link:
Назад
or a button element (this has the advantage of rendering identical to the submit element in most browsers, plus you likely won't need the btn class because you can directly address the element):
<input type="button" value="Назад" onclick="window.location = document.referrer" />
This script returns you to the previous page when called.
<script type="text/javascript">
function myFunction() {
var x = document.referrer;
window.location = x;
}
</script>
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>