i have this problem, I would like to load a text inside a div with .innerHTML but after the event click the text inside the div diseappers:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anagrafica</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>My Document</h1>
<input type="submit" value="submit" id="submit">
<div id="myDiv"></div>
<script src="js/app.js"></script>
</body>
</html>
app.js
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click',function({
document.getElementById('myDiv').innerHTML= 'hello';
});
You have syntax error , )} missing .
addEventListener('click', function({
Looks like callback but you need just function(){} to attach.
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click', function(){
document.getElementById('myDiv').innerHTML= 'hello';
}, false);
}, false);
<input type="submit" value="submit" id="submit">
<br/>
<br/>
<div id="myDiv" style="background-color:black;color:lime;width:300px" > ... </div>
On html
<button type='submit'></button>
On js
var Button = document.querySelector("button");
Button.addEventListener("click", onClickButton, false);
function onClickButton(){
// to do something here
}
Related
When I am trying to change background colour of body (background color changer project)using jquery, it changes and again comes to default background-color.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background-Color Changer</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<form action="">
<h3>Change the Background-Color (Hex code only)</h3>
<input type="text" name="" id="name" maxlength="7" placeholder="#" />
<button id="btn1" type="submit">Change</button>
</form>
</div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/main.js"></script>
</html>
JS:
$(document).ready(function () {
$("#btn1").click(function () {
$('body').css("background-color", $("#name").val());
});
});
Your button is inside a form, so when you click it, the form is submitted, and the page is reloaded. To prevent the form from being submitted, you can do this:
$("#btn1").click(function (evt) { // <- the event
$('body').css("background-color", $("#name").val());
evt.preventDefault(); // prevent the default behavior for that event
});
More info on Event.preventDefault()
I am trying to get input in one html form and then using event listener on a button to move to another html page as well as change the innerHTML of the 2nd html page to the input from 1st page but only the page switches but the innerHTML doesnt change
this is main html
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>
<button id="Butn1" onclick="location.href = 'resume.html';">Submit</button>
<script src="main.js"></script>
this is the 2nd html page
<div>
Name: <br>
<p id="fname1">hello</p>
</div>
<script src="main.js"></script>
and this is the js file
document.getElementById("Butn1").addEventListener("click",func1);
var a=document.getElementById("fname").value;
function func1(){
document.getElementById("fname1").innerHTML = a;
}
you can use this way.
if this is your first page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>
<button id="Butn1" onclick="handleClick()">Submit</button>
<script>
function handleClick()
{
location.href = 'secondPage.html?name=' + document.getElementById("fname").value;
}
</script>
</body>
</html>
this one would be your second page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('name');
alert(myParam);
</script>
</body>
</html>
but it is not recommended to use this if your string is too long.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tutorial</title>
</head>
<body>
<div class="alert" id="alert">
<p>Alert Alert Alert Alert Alert</p>
<button onclick="close()"><p>×</p></button>
</div>
<script src="script.js" charset="UTF-8"></script>
</body>
</html>
and this is my script.js:
function close() {
document.getElementById("alert").style.display = "none";
}
for some reason i can't use it externally, but when i use it inline it works. i've been searching for the answer for hours, but i can't find it anywhere, please help!
Change the name of the function from 'close' to another name like 'hideAlert'
function hideAlert() {
document.getElementById("alert").style.display = "none";
}
<div class="alert" id="alert">
<p>Alert Alert Alert Alert Alert</p>
<button onclick="hideAlert()"><p>×</p></button>
</div>
I have an html file and I want to grab the text that is entered in the input field using javascript. I have tried a few different ways but nothing seems to be working properly. Here is the code that I have right now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="searchingterm">
<form>
<input type="text" id="search">
</form>
<script>
$(document).ready(function(){
var searched = document.getElementById("search").value;
console.log(searched)
})
</script>
</body>
</html>
i also tried using jquery but that didnt do anything either.
basically, the problem is that you are not assigning anything to that input and also you dont have a function to trigger the search.
your code was right, you just needed to change it a little bit.
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
</body>
</html>
here having the script on the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
<script>
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
</script>
</body>
</html>
I am very new to phonegap as well as javascript and I'm trying to make a simple Contact Adder application but for some reason nothing happens when I try to add a contact. No alerts even appear. By the way, I am using an android emulator within eclipse to test my application. Can someone tell me what I am doing wrong? Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Add Contacts</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady()
{
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
<body onload = "deviceIsReady()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
This code working for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="jquery.mobile-1.3.2.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<title>Add Contacts</title>
<script>
function loaded(){
document.addEventListener("deviceready", deviceIsReady, false);
}
function deviceIsReady()
{
document.getElementById("save").addEventListener("click", addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
</head>
<body onload = "loaded()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
I tried in eclipse with android sdk, and I get the alerts on the emulator and after I add a new contact I sow it on the contacts. Before you try this code watch out for the script and style link. (rewrite it, or download the newest)
Your script tag is in-between the head and body tags. Try moving it into the body tag.
Your window load event also probably won't work. Just remove it, and simply attach the device ready event, so your script looks like this:
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady() {
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact() {
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
just remove the
<body onload = "deviceIsReady()">
and make a simple
<body>
you also need to put your
<script>
in head or body, but not between them!
you need to catch the event ondevice ready, but not on bodylaod. so try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady(){
alert("READY!");
}
</script>
</head>
<body>
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
it should works (for me, it works!). if not, check the manifest, maybe you do something wrong with it