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>
Related
I want to have an Image Slider which reads Image names from spans. What's wrong with my code? Even the alert command not executed. How to fix this?
<html><head>
<title></title>
<script src="Default.aspx_files/jquery-1.js" type="text/x-jquery-tmpl"></script>
<script src="Default.aspx_files/General.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
jQuery(function () {
var i = 0;
var banner = $('.imagesContainer span').map(function () {
return $.trim($(this).text())
}).get();
function fun() {
//How to init array here from inner text of spans?
i++;
if (i == banner.length) {
i = 0;
}
$('#img1').attr('src', '/slide/' + banner[i]);
alert('/slide/' + banner[i]);
}
setInterval(fun, 1000);
})
</script>
</head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="imagesContainer">
<span>
73defe4b-9819-4e12-b351-3813686e0c83.gif
</span>
<span>
4c2ed116-500d-42ad-8aa5-983bf214d5d3.png
</span>
</div>
</form>
</body></html>
Its not that you didn't know but it worked on a change of type="text/x-jquery-tmpl" to text/javascript in your jquery inclusion.
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>
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
I'm a newbie in javascript. As the title says, I'm trying to call javascript function from html generated by another javascript function. Following is a simple version of this code:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><BODY><FORM><INPUT type=\"button\" onClick=
\"myFunction2()\" value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
function myFunction2()
{
alert("function2 called!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
When I run firebug, I got an error saying "myFunction2 is not defined". I guess I have to put myFunction2 in html code generated by myFunction1. So I changed my code like this:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><HEAD><SCRIPT language=\"JavaScript
\">function myFunction2(){alert(\"function2 called!\");}
</SCRIPT></HEAD><BODY><FORM><INPUT type=\"button\" onClick=\"myFunction2()\"
value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
/* function myFunction2()
{
alert("function2 called!");
} */
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
However, after this change I got some messy result and the firebug says "unterminated string literal for var html_text=...". Any suggestions?
Also, my actual myFunction2 is really big, if I have to insert it into the html generated by myFunction1, is there a good way to put it in? Also, the instructor doesn't want us to use a separate file. Thanks!
This will work
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><BODY><sc"+"ript type=\"text/javascript\">function myFunction2(){alert('im 2')}</sc"+"ript><FORM><INPUT type=\"button\" onClick=\"myFunction2()\" value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
function myFunction2()
{
alert("function2 called!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
Note that you cannot include "<script>" in a sttring, you must break it in to "<scr" + "ipt>"
I've put your first version of code into http://jsfiddle.net/EwR6X/, and with one small amend - deleting couple of unwanted line breaks after onClick= - it works just fine.
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');
}