I have a JavaScript function that uses document.write() to write to the page. My issue is that when I click the button to call the function, document.write() replaces what I already had with what I am writing. Is there a way to write text to a specific div from JavaScript?
Here is my HTML code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js">
</script>
<script>
// Calling the Google Maps API
</script>
<script>
<!-- JavaScript to load Google Maps -->
</script>
</head>
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>this -->
<div id="bottom_pane_options">
<button onclick="todaydate();">Try It</button>
</div>
</div>
</body>
...and my JavaScript code (something I got from the internet just to test):
function todaydate() {
var today_date = new Date();
var myyear = today_date.getYear();
var mymonth = today_date.getMonth() + 1;
var mytoday = today_date.getDate();
document.write("<h1>" + myyear + "/" + mymonth + "/"+mytoday + "/h1">);
}
I would like the text to be right below the button. Any help would be appreciated.
Thanks,
Josh
You should avoid document.write. You'd better put your results to another div:
<div id="bottom_pane_options">
<button onclick="todaydate();">Try It</button>
<div id="results"></div> <!-- Added div ! -->
</div>
Then
function todaydate() {
var today_date=new Date();
var myyear=today_date.getYear();
var mymonth=today_date.getMonth() + 1;
var mytoday=today_date.getDate();
document.getElementById('results').innerHTML ="<h1>" + myyear + "/" + mymonth + "/" + mytoday + "</h1>";
}
As you can see, we're writing the results to the results div with .innerHTML.
Hope this helps. Cheers
HTML Code:
<div id="someclass"></div>
JS:
document.getElementById("someclass").innerHTML="<h1>some thing you want</h1>";
To write into a div do the following:
Step-1: Give div an id or classname
<div id="txt"></div>
Step-2. Use .innerHTML in the function:
document.getElementById('txt').innerHTML="HELLO";
You can simply try this...
<!doctype html>
<html>
<head>
<script type="text/javascript" >
function load() {
var div = document.getElementById('data');
div.innerHTML = div.innerHTML + "Write your New Data" + "<br>";
}
</script>
<body onload="load()">
<div id= "data">
Hello... I am old
</div>
</body>
</html>
I am calling this on onload() function you can call as per your beed
You need to tell Javascript to perform the action onload... Try with this:
<script type ="text/javascript">
window.onload = function sayHi(){
document.getElementById('hi').innerHTML = 'Hi';
};
</script>
then on your HTML:
<span id="hi"></span>
Related
So, i tried changing a p element by calling function through getElementById(). But when i click the button nothing happens.
when i click the button it should change car brands to the length of the string and and also add lamborghini.
Here's the code:-
<html>
<head>
<script src="javascript_file.js" type="text/javascript"></script>
</head>
<body>
<h1>strings and functions</h1>
<p id="pFunction">hi</p>
<button type="button" onclick="document.getElementById('pFunction').innerHTML = 'bye'">click!</button>
<p id="slice">car brands</p>
<button onclick="sliceF">Click it!</button>
</body>
</html>
Js:-
function sliceF(){
var cars = "bmw , lamborghini , toyota";
var lengthCars = cars.length;
var sliceCars = cars.slice(6 , 16);
document.getElementById('slice').innerHTML = "the length of the string is " + lengthCars + "<br/>" + "the brand in the middle is " + sliceCars;
}
change "sliceF" to "sliceF()"
is it working now.?reply if not working..
you have forgott the brackets for function call:
<html>
<head>
<script src="javascript_file.js" type="text/javascript"></script>
</head>
<body>
<h1>strings and functions</h1>
<p id="pFunction">hi</p>
<button type="button" onclick="document.getElementById('pFunction').innerHTML = 'bye'">click!</button>
<p id="slice">car brands</p>
<button onclick="sliceF()">Click it!</button>
</body>
</html>
https://jsfiddle.net/
I think you just need to change
onclick="sliceF"
to
onclick="sliceF()"
So I'm pretty experienced with programming, but I am just getting new to Javascript. I am making a new element when I click a div, but it won't work. I have tried many methods, and this one seems like the simplest. Can you help me figure out what is wrong?
<!doctype html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='style.css'/>
<meta charset="UTF-8">
</head>
<body>
<div class="head">
<h1>Corkboard</h1>
<div id="addNote" onclick="showNewNoteMenu()">+</div>
</div>
<div id = "newNoteMenu">
<div class="container">
<input id="title" type="text" placeholder="Title" name="Title"/> <br />
<textarea id="details" cols=22.5 rows=5></textarea> <br />
<div onclick="createNewNote()" id='submitNewNote'>Make New Note</div>
</div>
</div>
<div class="content" onclick="hideNewNoteMenu()">
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="script.js"></script>
</html>
function showNewNoteMenu() {
document.getElementById("newNoteMenu").style.display = "inline-block";
};
function hideNewNoteMenu() {
document.getElementById("newNoteMenu").style.display = "none";
};
function createNewNote() {
document.getElementsByTagName("h1").innerHTML = "This works"
alert("OK");
var title = document.getElementById("title").value;
var text = document.getElementById("details").value;
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var time = hours + ":" + minutes;
var content = document.getElementsByClassName("content");
var note = '<div class="note"><div class="container"><h2>'+ title + '</h2><i>' + time + '</i><p>' + text + '</p></div></div>';
}
hideNewNoteMenu();
It appears all that's missing is to insert the string of markup, note, into the document.
In this case, you can use .insertAdjacentHTML():
var content = document.getElementsByClassName("content");
var note = /* ... */;
content[0].insertAdjacentHTML('beforeend', note);
With beforeend, it will insert the note as the content's last child.
Also, the use of [0] is because getElementsByClassName() returns a collection of Elements (note the plural getElements...).
Since you've included jQuery, this could also be accomplished with jQuery(html) and .appendTo():
$(note).appendTo(content[0]);
Change this:
<div id="addNote" onclick="showNewNoteMenu()">+</div>
to
<div id="addNote">+</div>
and
document.getElementById("addNode").addEventListener("click",showNewNoteMenu);
Be sure the JavaScript executes after the page has been loaded and parsed. You should have a window.onload.
With the use of Javascript I want to display different HTML content based on the value of a class of an HTML element which is existing on the page. eg:
<body class="de">
display:
<div id="de">some html</div>
If the body element has another class value, eg class="en" it should display
<div id="en">some other html</div>
I have already played around with hasClass function and an if statement. But it did not work for me.
What about ?
<body class="en">
<script>
if($('body').hasClass('de')) {
$('body').html('<div id="de">some html</div>');
}
else if($('body').hasClass('en')) {
$('body').html('<div id="en">some other html</div>');
}
else if($('body').hasClass('es')) {
$('body').html('<div id="es">another html</div>');
}
else {
...
}
</script>
Dynamic :
var bodyClass = $('body').attr("class");
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
But you should verify that body has a class and that an element with an identical id exist in your document.
The solution I am working with:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
if($('body').hasClass('lang-de')) {
document.getElementById("lang"); {
$('#lang').html('<div id="de">some html</div>');}
}
else if ($('body').hasClass('lang-en')) {
document.getElementById("lang"); {
$('#lang').html('<div id="en">some other html</div>');}
}
</script>
</body>
</html>
With jQuery :
$('.de').html('<div id="de">some html</div>');
If you have different tags to fulfil with different html content use a generic class + a specific one (eg : class="dynamic de") and loop all elements with "dynamic" class and use hasClass in a if/elseif (or better a switch/case) to target them separatly.
Btw, AngularJs has "directives" that handle perfectly that kind of need ;)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang-de"></div>
<div id="lang-en"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
$('div#lang-*').hide();
$('#' + bodyClass).show();
</script>
</body>
</html>
What about?
<html>
<head>
<style>
body.lang-en #en{display:block;}
body.lang-de #de{display:block;}
</style>
</head>
<body class="lang-en">
<div id="en" hidden>some text</div>
<div id="de" hidden>some other text</div>
<hr>
<button onclick="toggle()"></button>
</body>
<script>
function toggle(){
var lang=['lang-en','lang-de'];
var i=lang.indexOf(document.body.className);
document.body.className=(i+1 == lang.length ? 0 :i+1);
}
</script>
</html>
OR
with jQuery
$('#en,#de,#jp').hide();
$('#'+$('body').attr('class').replace('lang-','')).show();
I'm making a little application with intel xdk I have already passed id values from one page to another. My problem is when I print some links in html I can't pass value from the other page. I'm trying by this way:
<script>
document.write("<a href='#' onclick='sendID('page2.html', '21')'>Link</a>");
</script>
I have passed id value from one page to another but in this case I need to pass from a printed link. Is it possible or there is another way. Thanks!
Also I don't know if there is another way to call a function that receives parameters when the link is printed.
More information. Into my head tag:
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
dir = dir.substring(0,dir.length-1);
location.href=dir;
}
</script>
</head>
And in my body tag:
<body>
Right link<br>
<br>
<br>
<script>
document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>");
</script>
</body>
In the first link the function is called and I get redirected to the other page, but in the printed link is doesn't work.
You have to do something like this
<body>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
return dir.substring(0,dir.length-1);
}
</script>
<script>
document.write("Link");
</script>
</body>
alternatively
you can also do a document.write(<<escape and put the sendID javascript function here>>) following by the document.write that prints the anchor tag.
<!DOCTYPE html>
<html>
<style type="text/css">
</style>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
dir = dir.substring(0,dir.length-1);
location.href=dir;
}
</script>
</head>
<body>
click here
<br>
<br>
<script>
document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>");
</script>
</body>
</body>
</html>
I am trying to use some HTML tag inside JavaScript, but the HTML tag does not work. How can U use an HTML tag inside JavaScript? I wanted to use h1 but did not work.
if (document.getElementById('number1').checked) {
<h1>Hello member</h1>
}
You will either have to document.write it or use the Document Object Model:
Example using document.write
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello member</h1>");
}
</script>
Example using DOM
<h1></h1> <!-- We are targeting this tag with JS. See code below -->
<input type="checkbox" id="number1" checked /><label for="number1">Agree</label>
<div id="container"> <p>Content</p> </div>
<script type="text/javascript">
window.onload = function() {
if( document.getElementById('number1').checked ) {
var h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Hello member"));
document.getElementById("container").appendChild(h1);
}
}
</script>
<html>
<body>
<input type="checkbox" id="number1" onclick="number1();">Number 1</br>
<p id="h1"></p>
<script type="text/javascript">
function number1() {
if(document.getElementById('number1').checked) {
document.getElementById("h1").innerHTML = "<h1>Hello member</h1>";
}
}
</script>
</body>
</html>
This is what I used for my countdown clock:
</SCRIPT>
<center class="auto-style19" style="height: 31px">
<Font face="blacksmith" size="large"><strong>
<SCRIPT LANGUAGE="JavaScript">
var header = "You have <I><font color=red>"
+ getDaysUntilICD10() + "</font></I> "
header += "days until ICD-10 starts!"
document.write(header)
</SCRIPT>
The HTML inside of my script worked, though I could not explain why.
here's how to incorporate variables and html tags in document.write
also note how you can simply add text between the quotes
document.write("<h1>System Paltform: ", navigator.platform, "</h1>");
JavaScript is a scripting language, not a HTMLanguage type. It is mainly to do process at background and it needs document.write to display things on browser.
Also if your document.write exceeds one line, make sure to put concatenation + at the end of each line.
Example
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello" +
"member</h1>");
}
</script>
<div id="demo"></div>
<input type="submit" name="submit" id="submit" value="Submit" onClick="return empty()">
<script type="text/javascript">
function empty()
{
var x;
x = document.getElementById("feedbackpost").value;
if (x == "")
{
var demo = document.getElementById("demo");
demo.innerHTML =document.write='<h1>Hello member</h1>';
return false;
};
}
</script>
<div id="demo"></div>
<script type="text/javascript">
if(document.getElementById('number1').checked) {
var demo = document.getElementById("demo");
demo.innerHtml='<h1>Hello member</h1>';
} else {
demo.innerHtml='';
}
</script>