I have just started learning Javascript. I want "Hello World!" to be written to a webpage once a user clicks a button. I have tried this:
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
document.write("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
I can get it to do a window.alert("Hello World!") but not do document.write("Hello World!") for some reason. What happens is the button disappears and no text is displayed. My guess is that the problem is in the document.write but I do not know how to work around it. Any suggestions?
Because the document has already been written at that point. You can set text like so:
<button id="lol">blah</button>
<script>
function setText( obj, to ) {
obj.textContent? obj.textContent = to : obj.innerText = to;
}
var lol = document.getElementById('lol')
lol.onclick = function() {
var p = document.createElement('p');
document.body.appendChild(p);
setText( p, 'hi' );
}
</script>
Another popular but often looked down technique would be innerHTML.
Document.write is used to write to the currently loading HTML file. Once the page has been loaded, and a user begins interacting with the page, document.write is useless.
Related
I am trying to print something inside my html from a javascript. I don't know javascript much. I did this but it don't work:
<script type='text/javascript'>
//<![CDATA[
function title() {
var t = document.title;
document.write(t);
}
//]]>
</script>
<div>
<span><script>title();</script></span>
</div>
You can use element.innerHTML
let name = document.getElementById("name");
name.innerHTML = "hello world";
<div itemprop='review' itemscope='' itemtype='https://schema.org/Review'>
<div itemprop='itemReviewed' itemscope='' itemtype='https://schema.org/Product'>
<span itemprop='name' id="name" />
</div>
</div>
If you fix your syntax error, and take away the CDATA you have a working bit of code. The reason why you still won't see any output is that, because you don't have a proper HTML document structure, there's no title to print...
Here's some updated code and an example of how to go about debugging using console.log().
<script type='text/javascript'>
function title() {
var t = document.title;
// print the value of t to the console to test
console.log( 'title is: ' + t );
document.write(t);
}
</script>
<div>
<span>
<script>title();</script>
</span>
</div>
You can define an external JavaScript file and link it to your html page like this.
<button onclick="myFunction()">Click me!</button>
<script src="app.js"></script>
and then define your function into app.js, like this:
function myFunction() {
document.write("Hello, I'm here!");
}
I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page as the original variable input. Thanks!
create a div in your body for result like
<div id="result"></div>
update from script like
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = <your value>
Without additional libraries, using only browser functions, you can do this with the document.getElementById() function like this:
<html>
<head>
<title>test</title>
</head>
<body>
<input type="text" id="textfield">
</body>
<script>
function someFunction() {
return "Hello world!";
}
document.getElementById('textfield').value = someFunction();
</script>
<html>
I am writing this simple html in the editable email notification dialog box:
<!DOCTYPE html>
<html>
<body>
<p id="demo"> </p>
<script type="text/javascript">
document.getElementById("demo").innerHTML = "this is from JS";
</script>
</body>
</html>
However I am unable to see the string " this is from JS" in the generated email. Not sure what am I doing wrong ? Any pointers?
You have your JS, but it seems that you never call it.
Try running in a load or ready function.
<script type="text/javascript">
window.onload = function() {
document.getElementById("demo").innerHTML = "this is from JS";
};
$( document ).ready(function() {
document.getElementById("demo").innerHTML = "this is from JS";
});
</script>
I think this is what you are trying to do.
UPDATE:
Alright, I found another function that will work for you. here is the the FIDDLE.
<body>
<p id="demo"></p>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("demo").innerHTML = "this is from JS";
});
</script>
</body>
I have a very basic input/output structure in HTML:
<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea>
<div id="output"></div>
And I have JS function that should pass everything from input to output:
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.innerHTML;
}
The sendCode() function works when I call it manually, but it seems that onkeyup event not firing in this textarea.
Here is jsfiddle: http://jsfiddle.net/mudroljub/y5a2n8ab/
Any help?
UPDATE: jsfiddle is updated and working now.
Use value since it's not a content text but a value property
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.value;
}
And a working demo here
I would first like to point out that this will not run because the code runs before the HTML exists, so first off, put these lines inside a function:
window.onload= function anyname() {
var input = document.getElementById("input");
var output = document.getElementById("output");
}
Secondly, try using either:
editor.onkeyup = "sendCode()"
in your script area or at the top of the new function i created:
editor.addEventListener(keyup,sendCode,false)
Basically when a key goes up in that area it calls the sendCode() function. The false is if you don't want to use capture which I think is default anyway but just to be safe.
Basically java script is not that dynamic.So a better option is to
use jQuery.
[Note:- "jquery-2.2.2.min.js" given in src, in script tag,
is Jquery Library file codes can be copied from following link :http://code.jquery.com/jquery-2.2.2.min.js]
Just copy the contents from above link,into a textfile , save it by the name "jquery-2.2.2.min.js"
or any other name as you wish.The src of script should contain the same.
The "jquery-2.2.2.min.js" should be in the same directory where
you have the html file. Otherwise full path to be mentioned.
Here is the answer to your question.
<html>
<head>
<title>Dynamic TextArea</title>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("textarea").keyup(function(){
sendCode();
});
});
function sendCode(){
document.getElementById("output").innerHTML =
document.getElementById("input").value;
}
</script>
</head>
<body>
<form>
<textarea id="input">
Hello World!
</textarea>
</form>
<span id="output"></span>
</body>
</html>
If you have any doubts please ask.
I am sure once you learn to use jQuery you would forget javascript.
Where do you define the sendCode() function? It might not exist at the point where you create your text area.
This snippet should work:
<textarea id="editor">
Hello World!
</textarea>
<div id="output"></div>
<script type="text/javascript">
var editor = document.getElementById("editor");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = editor.value;
}
editor.addEventListener('keyup',sendCode);
</script>
I'm opening a popup using popup = window.open(....) and then trying to insert some html into a div in the popup.
popup.document.getElementById('div-content').innerHTML = "hello world"; doesn't do anything however, popup.document.getElementById('the-field').value = "Hello There"; changes the content of a field with an id="the-field".
Any idea why one is working but not the other? How can i replace the content of the div?
hope you can help.
EDIT:
the popup
<!DOCTYPE html>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<div id="div-content"></div>
<div id="report-container">
<input type="text" id="the-field" name="the_field"/>
</div>
<footer>
</footer>
</body>
</html>
the code
function reportComplete(report_content)
{
var popup;
var template_path;
template_path = base_url + "application/views/secure/reports_preview.php";
popup = window.open(template_path, "Report", "scrollbars=yes ,resizable=yes");
popup.document.getElementById('the-field').value = "Hello There"; // this works
popup.document.getElementById('div-content').innerHTML = "hello world";
}
...or simply:
<script type="text/javascript">
function reportComplete(report_content)
{
var popup;
var template_path;
template_path = base_url + "application/views/secure/reports_preview.php";
popup = window.open(template_path, "Report", "scrollbars=yes,resizable=yes");
popup.window.onload = function() {
popup.document.getElementById('the-field').value = "Hello There";
popup.document.getElementById('div-content').innerHTML = "hello world";
}
}
</script>
I think the problem here is that the document in the popup windows hasn't finished loading when you try to access a part of it. On my machine, neither of the divs can be accessed with the provided code.
If the content you want to insert is fixed, then just do all these changes on the popup page itself so that you can make it happen only when the document is completely loaded. If you need to send some dynamic contents, the easiest approach may be using query strings.
UPDATE:
There is a way to fire up DOM manipulation function only when the popup finishes loading. First, you need a callback function on the main window, and put all the DOM manipulation code there:
window.callback = function(doc) {
doc.getElementById('the-field').value = "Hello there";
doc.getElementById('div-content').innerHTML = "Hello world";
}
Then, simply bind a function call to the body onload event on the popup window:
<script type="text/javascript">
function loaded() {
window.opener.callback(document);
}
</script>
<body onload="loaded();"><!-- body content --></body>