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>
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()"
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>
Here is the javascript code.
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if(filmName == "parker")
window.location.assign("http://www.google.com");
else
alert("hello");
}
</script>
If I enter any other string I get an "hello" alert and If I enter "parker" the page "http://www.google.com" wont get loaded. Why is this happening?
EDIT:
Ok as someone mentioned I did remove "http://www.google.com" and added "http://stackoverflow.com" but it did not resolve my problem. And I cant even load local html pages that are in the same directory
if(filmName == "parker")
window.location.assign("index.html"); // also "./index.html" or ./index/html
Even this is not working. What's wrong
I also have jquery libraries: that is Jquery UI and Jquery
This question needs more of info I think. Here are the final edits
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Other style and js libraries, including Jquery Ui and regular jquery -->
<script>
$(document).ready(function() {
$(".youtube").fancybox();
}); // end ready
</script>
<script>
$(document).ready(function(e) {
$('.tooltip').hide();
$('.trigger').mouseover(function() {
/* Rest of it, which is not necessary here */
</script>
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName); // for debugging
if(filmName == "parker")
window.location.assign("index.html");
else
alert("hello");
}
</script>
</head>
<body>
<div id='mysearch-box'>
<form id='mysearch-form'>
<input id='mysearch-text' placeholder='' type='text'/><!-- Input here guys -->
<button class = "none" id='mysearch-button' onclick = "myfunc()">Search</button>
<!-- press this button after entering "parker" -->
</form>
</div>
<!-- Rest of the HTML page -->
</body>
</html>
I assume you are using a form onsubmit event to call myfunc, if so you have to prevent the default behavior by return false; (for example)
HTML:
<form id="form">
<input type="text" id="mysearch-text">
<input type="submit" value="Submit">
</form>
JS:
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if (filmName == "parker") window.location.href = "http://www.w3fools.com";
else alert("hello");
return false; //prevent the default behavior of the submit event
}
}
</script>
I have tested the following solution and it works perfectly:
setTimeout(function(){document.location.href = "page.html;"},500);
This is a javascript meant to be a part of chrome extension. It should print out id when I press the add button.
What it does, though, is I have to press add TWICE to have the id appended where I want it to ( I use this instead of alert)
When debugging, it says that bookmarkBarID is undefined... I suppose this is the error but I dont know how to fix it. Please help
here is the whole code:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var bookmarkBarID;
function getBM(){
chrome.bookmarks.getTree(function(tree){
bookmarkBarID=tree[0].children[0];
});
}
function CreateNewItem()
{
$('#submit').click(function (){
getBM()
console.log(bookmarkBarID);
$('.bookmark').append(bookmarkBarID.id);
})
}
</script>
</head>
<body onload="CreateNewItem();" style="width:1200px">
<div class="bookmark"></div>
<input type="text" value="enter url here" id = 'urlLink' />
<input type="text" value="enter Name title" id='linkName'/>
<input type="text" value="" id='folderName' />
<div><button id="submit">Add</button></div>
</body>
</html>
chrome.bookmarks.getTree is an asynchronous function, which means that it runs at the same time as your other code. The function finishes after the rest of your code executes. To use the function's results, you need to give a callback function that will be called with the results. In this case, you need to move $('.bookmark').append(bookmarkBarID.id); into the callback function:
function getBM(){
chrome.bookmarks.getTree(function(tree){
bookmarkBarID=tree[0].children[0];
console.log(bookmarkBarID);
$('.bookmark').append(bookmarkBarID.id);
});
}
function CreateNewItem()
{
$('#submit').click(function (){
getBM();
})
}
Note: you should use $(document).ready(CreateNewItem); instead of onload (assuming that you are using jQuery).