Below is a function that I have been trying to call to set focus on a text box, but it is not doing so. I would be thankful if anyone can tell me how to do this.
Thanks in advance :)
address1 is the id of the text box.
function address_validation(address1)
{
document.getElementById("address1").focus();
return false;
}
You are using "address1" than address1.
Your are supposing to get element by using dynamic id address1 but you have used static one "address1".
function address_validation(address1){
document.getElementById(address1).focus();
return false;
}
<html>
<head>
<style>
#txt:focus{
background:black;
}
</style>
</head>
<body>
<input type="text" id="txt"><BR>
<input type="button" onclick="btn()" value="set focus">
<script>
function btn(){
var txt = document.getElementById("txt");
txt.focus();
return false;
};
</script>
</body>
Related
This is the method which I tried. I've added a feedback just to test out if the JavaScript variable siteName contains the value from the HTML textbox value but it reflected "[object HTMLInputElement]" instead. Any idea why?
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName = document.getElementById('firstid');
function myFunction() {
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
You have to use the value property to get the actual text from the input. Otherwise it will return the reference of the input text field. The reference is type of HTMLInputElement which has a value property holding actual data entered in the text field.
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName;
function myFunction() {
siteName = document.getElementById('firstid').value;
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Use the value of the input element to retrieve from value form it, or else you will be getting an object.
document.getElementById("2ndid").innerHTML = siteName.value;
This is a pretty simple fix, you just have to add the value property at the end of the second fucntion.
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName.value;
}
You are not initialising your variable.
here a working code.
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName;
function myFunction() {
siteName= document.getElementById('firstid').value;
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
I was working on variables and loop frames and stumbled across this problem. I tried switching some things around but none have succeeded. I put the code in a validator and it showed the document as valid.
Whats missing?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value
if (myValue.length == 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitute" />
</body>
</html>
Mentioning the name of a variable holding a function doesn't call the function. You have to actually call it explicitly.
This is usually done by placing () after the reference to the function.
onclick="substitute()"
EDIT - SOLVED // As user Win pointed out in the answers, if a function is named click and you try to call it with a HTML button, then it will confuse the function with an inbuilt/standard "click()" function for HTML buttons
Can anybody figure out, why (in the world) this isn't working? I get no bug reports in Chrome, my IDE and/or JSFiddle.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="app.js"></script>
</head>
<body>
<input id="search" type="text" name="input" placeholder="Search..">
<button onclick="click()" value="Submit">Get weather</button>
</body>
</html>
JavaScript
function click() {
if (document.getElementById("search").value == "New York") {
console.log("Loading weather for New York...");
} else {
console.log("City name isn't valid. Try again");
}
}
JSFiddle: https://jsfiddle.net/nd6f5pp7/
Thanks in advance.
Don't call the function click, it'll get confused with obj prototypes.
// Grab Input from DOM
var iptSearch = document.getElementById('search')
// Grab Submit button from DOM
var btnGetWeather = document.getElementById('get-weather');
// Add Event Listener
btnGetWeather.addEventListener('click', function() {
if (iptSearch.value === "New York") {
console.log("Loading weather for New York...");
} else {
console.log("City name isn't valid. Try again");
}
});
<input id="search" placeholder="Search..."/>
<button id="get-weather">Get Weather</button>
Or, if you want to follow the example code you've given. Use the below:
function getWeather() {
if (document.getElementById('search').value === "New York") {
console.log("Loading weather for New York...");
} else {
console.log("City name isn't valid. Try again");
}
}
<!DOCTYPE html>
<html>
<head>
<script src="app.js"></script>
</head>
<body>
<input id="search" type="text" name="input" placeholder="Search..">
<button onclick="getWeather()">Get weather</button>
</body>
</html>
Hello again StackOverflow peeps! = )
Now I'm trying to get the value from two textboxes into a div\p\span
So, in the first box I write some text, and in the second a number
Now, when I click the button, its supposed to take the value from box1 and then write it in the div, as many times as the value in box2.
I've gotten it to take the value from box1 to the div, but I can't get it to duplicate it with a numbervalue from box2. I removed my faulty code and whats left is just the copy value to <p> thing
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function starfire () {
document.getElementById("tekst").innerHTML = document.getElementById("boks1").value;
return true;
}
</script>
</head>
<header>
<h1>cake</h1>
</header>
<body>
<input type="text" id="boks1">
<input type="number" id="boks2">
<br>
<button type="button" id="btn" onclick="starfire()">Trykk</button>
<p id="tekst"></p>
</body>
</html>
Appreciate any help from you awesome people <3 =)
Sincerely
Gruff
function starfire () {
var boks1=document.getElementById("boks1").value;
var boks2=parseInt(document.getElementById("boks2").value);
var html="";
for (var i=1; i<=boks2; i++) {
html+=boks1;
}
document.getElementById("tekst").innerHTML = html;
}
I am new to Javascript. I am facing a problem with global variables. I can't figure out that why the global variables are not working as the code looks ok. Please Help me solve this problem.
I will breifly explain the code first.I have some text on a page which changes to text field when clicked. When I define the variables inside the functions body the code starts working fine. When these variables are defined globally as in the following code, the console displays this error: the variable is not defined. Here my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>
Please Help!
Thanks in Advance.
As Adam said, the issue is that you are running javascript on the document before the document has been loaded. There are a number of ways to fix this, but the simplest is to just move your javascript code to the end of the body so the document has already been parsed and is ready before your code runs like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</body>
</html>
The error is likely caused by grabbing DOM nodes before they're ready:
var textNode = document.getElementById('text');
This is likely returning either null or undefined since that DOM element hasn't been created yet.
Putting this script at the end of your body should solve your problem.
Or, if you'd like to use jQuery, you can do all this in
$(document).ready(function() {
var textNode = document.getElementById('text');
}