To insert HTML code using javascript dynamically, we use innerHTML after a tag is selected. Simple, but for me is not working. I've seen some links on SO and internet to do that.
My code is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css"/>
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much){
for(var i=0; i < how_much; i++){
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHtml = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much"/>
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)"/>
<div id="my_container"></div>
</body>
</html>
When I press the button, nothing occurs. Dynamic content isn't added on the page. I tested on Firefox and Chrome. Even the simplest div_cont.innerHtml = 'asdasd' won't work.
This code is so simple but isn't working. Is there a specific reason for this behavior?
Pay attention to your capitalization of .innerHTML:
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
It should be div_cont.innerHTML = 'asdasd'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css" />
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much) {
for (var i = 0; i < how_much; i++) {
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much" />
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)" />
<div id="my_container"></div>
</body>
</html>
Related
I made an HTML document with a button that when I click were to it display a prompt that modify a p tag.
Probably, I made a dumb error of code syntax(I am beginner in js).
Help me and explain please.
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href='calendar.css'/>
<script type="text/javascript">
function name(x){
var x = prompt("Enter the month name","Ex. January");
document.getElementById("month_name").innerHTML = x;
}
</script>
<title>:)</title>
</head>
<body>
<div class="title_Month">
<button onclick="name()" class="title" >Change the month displayed</button>
<p id="month_name"></p>
</div>
</body>
</html>
name is reserved in javascript.
You should avoid using the name of JavaScript built-in objects, properties, and methods
https://www.w3schools.com/js/js_reserved.asp
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href='calendar.css'/>
<script type="text/javascript">
function names(){
var x = prompt("Enter the month name","Ex. January");
document.getElementById("month_name").innerHTML = x;
}
</script>
<title>:)</title>
</head>
<body>
<div class="title_Month">
<button onclick="names()" class="title" >Change the month displayed</button>
<p id="month_name"></p>
</div>
</body>
</html>
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
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
How can I use dropzone without using the class in the form.
I basically want to have a div inside a form and call class="dropzone" in that div. But it doesn't seems to work.
Here is my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "file-upload"})
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
Initiate .ready event when DOM ready and use like this.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var myDropzone = new Dropzone("div#myId", { url: "file-upload"});
});
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
your url parameter is not pointing to any valid php file. I believe your code should be thus
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "upload.php"}) //according to your forms action
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
I have div and hidden span on it. I want to show it by button clicking. My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script type="text/javascript" src="/static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
And my js file:
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
When i button clicked span does not show. Why? It shows very fast and than hidden again.
Chrome developer tools console doesn't show errors too.
Thank you.
Try adding return false to your button onClick() event.
Like this:
<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>
You need to define your function before your first call to the function is being made. Normally it can be achieved by putting the function code inside a script tag nested inside the head of your HTML.
Like this:
<head>
<script type="text/javascript">
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
Sorry but this code works:
<html>
<head>
<script>
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
<body>
<div>
<span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</div>
</body>
</html>
EDIT
I just read your edit. Btw i think your absolute path may causes problem.
Try this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script type="text/javascript" src="./static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>