I need to create a document Object into HTML page using javaScript
to execute a new HTML page into it;
like this :
<!DOCTYPE html>
<html>
<head>
... some head tags appened
<script>
// not problem of with jquery or not
function createDocument(){
var ta = document.getElementById('ta');
var targetElement = document.getElementById('targetElement')
// so i need to know how can use [ta.value]
// to execute it in new DOCUMENT Element appended it in [targetElement]
// without get or set global variables in origin document
}
</script>
</head>
<body>
<textarea id="ta"></textarea>
<div id="targetElement">
<!-- need to append new html document HERE! -->
</div>
<!--
when click the run Button the value of text area can be
running content to create new document object into targetElement
-->
<button onclick="createDocument()">RUN</button>
</body>
</html>
You probably mixed up .getElementById and .createElement
<!DOCTYPE html>
<html>
<head>
<script>
function createDocument(){
var ta = document.getElementById('ta').value;
var targetElement = document.getElementById('targetElement');
targetElement.innerHTML = eval(ta);
}
</script>
</head>
<body>
<textarea onchange="createDocument();" id="ta"></textarea>
<div id="targetElement">
<!-- Content goes here -->
</div>
</body>
</html>
Related
I was trying to use the example from here:
https://developer.mozilla.org/en-US/docs/Web/API/Document/forms
for my own uses.
The above example is accessing a form on the same page. My example attempts to populate a field on a different page.
Here is the launcher html - launcher.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Launcher page</title>
<script>
function launch(text) {
window.open("http://localhost/page2.html", '_blank');
let entryform = window.document.forms.newentry;
entryform.elements.town.placeholder = text;
window.focus();
}
</script>
</head>
<body>
<p>Click button to launch page2 and populate edit box on form</p>
<button type="button" id="launcher" onclick="launch('Edinburgh')">populate a text field on a different page</button>
</body>
</html>
And the launched page - page2.html:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<header>
<h1>This page launched from launcher.html</h1>
</header>
<main>
<form name="newentry">
<p>Town: </p><input type="text" name="town" value="">
</form>
</main>
</body>
</html>
But when I click the button on launcher.html I get an error on the launcher.html page:
entryform.elements.town.placeholder = text;
Uncaught TypeError: Cannot read property 'elements' of undefined
at launch (launcher.html:10)
at HTMLButtonElement.onclick (launcher.html:20)
Why is this elements property undefined?
How can I fix this?
EDIT
What I really wanted to do was simple, but the window.open object returned was not ready at the point I was attempting to edit. The really simple solution is like this:
function launch(text) {
let p2win = window.open('page2.html', '_blank');
p2win.onload = function(){
p2win.document.forms.newentry.town.value = text;
}
}
Your problem is that this code...
let entryform = window.document.forms.newentry;
is looking in the current window (ie launcher.html) for the form element. What you can do instead is save a reference to the popup window and access its elements via that reference.
let popup = window.open("http://localhost/page2.html", '_blank')
let entryform = popoup.document.forms.newentry
// and so on
As an alternative, I would consider passing a query parameter to the popup page instead of trying to manipulate it externally.
For example
window.open(`page2.html?placeholder=${encodeURIComponent(text)}`, '_blank')
and then in page2.html...
<main>
<form name="newentry">
<p>Town: </p><input type="text" name="town" value="">
</form>
</main>
<script>
let query = new URLSearchParams(location.search)
document.querySelector('form[name="newentry"] input[name="town"]')
.placeholder = query.get('placeholder')
</script>
Live demo ~ https://codesandbox.io/s/determined-archimedes-51vn2
I don't know why the code got no error but isn't displaying the message in JavaScript in the mood function ! It's only displaying the div.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<div onload="mood()" style="display: block" id="t">HEYYYYY</div>
Add the onload in body instead of div
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
function mood(){
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
</script>
</head>
<body onload="mood()">
<div style="display: block" id="t">HEYYYYY</div>
</body>
</html>
var box = document.getElementById('t');
function mood() {
box.innerHTML = "Hey <strong>Thanks!</strong>";
}
window.addEventListener('load', mood)
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
</script>
</head>
<body>
<divstyle="display: block" id="t">HEYYYYY</div>
</body>
</html>
You can use an event listener. This waits until the window is loaded and then runs the function. I hope this helps :)
The onload attribute is only supported on the following HTML tags: <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>.
I've adjusted your example below, moving the onload attribute to the body tag in this instance.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<body onload="mood()">
<div id="t" style="display: block">HEYYYYY</div>
</body>
I'm making an application with the LoL (league of legends) api.
Currently I'm having trouble with my input. First I made an inputbox and submitbutton in JavaScript and wrote some code so I could use it.
var inputbox = document.createElement("input");
inputbox.type = "input";
document.body.appendChild(inputbox);
var button = document.createElement("input")
button.type = "button";
button.value = "Press me!";
document.body.appendChild(button);
Afterwards I used this code to use the input value.
button.addEventListener("click", function() {
LookUpSummonerInformation(inputbox.value);
});
My question is how can I put this into my index.html instead of my js file.
I can't use a form to do it as it will probably be a single page application.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>LoL Thing</title>
</head>
<body>
<input type='input' id='lol-input'></input>
<button onclick='do_the_thing();'>Press me!</button>
<script>
function do_the_thing() {
var inputbox = document.querySelector('#lol-input');
LookUpSummonerInformation(inputbox.value);
}
</script>
</body>
</html>
Here's a simple example of how you would mix the JS with HTML.
I guess that you are looking for something like this
<html>
<head>
<script>
document.onload = function(){
var inputbox = document.createElement("input");
inputbox.type = "input";
document.body.appendChild(inputbox);
var button = document.createElement("input")
button.type = "button";
button.value = "Press me!";
button.addEventListener("click", function() {
LookUpSummonerInformation(inputbox.value);
});
document.body.appendChild(button);
}
</script>
</head>
<body>
...
</body>
</html>
You can always include JavaScript code using a <script> tag in the body of your html document.
Eg:
<html>
<head>
<!-- Head code here -->
</head>
<body>
<script>
// Your JavaScript code goes here
</script>
<!-- Remaining body code here -->
</body>
<html>
Alternatively
You can link javascript to your index file also using a <script> tag.
Eg:
<html>
<head>
<!-- Head code here -->
</head>
<body>
<script src="path_to_your_js_file"></script>
<!-- Remaining body code here -->
</body>
<html>
I have made a code in which on clicking computer Science button I get data from XML
<html>
<head>
<script src="loadxmldoc.js"></script>
</script>
</head>
<body>
<h1 style="text-align:center">DEPARTMENT DETAILS</h1>
<button onclick="myfunction()">Computer Science</button>
</br>
<script>
function myfunction(){
xmlDoc=loadXMLDoc("faculty.xml");
var x=xmlDoc.getElementsByTagName("computer")[0];
var y=x.childNodes;
for(i=0;i<y.length;i++)
document.write(y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>");
}
</script>
</body>
</html>
When I click on button I do get the data but a new page is loaded. I would like to have data below the button. How to do so?
document.write is archaic and useful only before the DOM has loaded. If it's used after that, it overwrites the current DOM, as you've discovered.
Use DOM methods instead and prepare a container to receive the content.
HTML:
<div id='container'></div>
JS:
var cntr = document.querySelector('#container'), html = '';
for (var i = 0; i < y.length; i++) {
html += y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>";
}
cntr.innerHTML = html;
Consider using this approach.
Basically load your xml data, and display the result in a div "result";
<html>
<head>
<script src="loadxmldoc.js"></script>
</script>
</head>
<body>
<h1 style="text-align:center">DEPARTMENT DETAILS</h1>
<button onclick="myfunction()">Computer Science</button>
</br>
<script>
function myfunction(){
xmlDoc=loadXMLDoc("faculty.xml");
var x=xmlDoc.getElementsByTagName("computer")[0];
var y=x.childNodes;
var result = document.getElementById('result');
for(i=0;i<y.length;i++)
result.innerHTML = ''; // always reset
result.innerHTML +='y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>"';
//document.write(y[i].nodeName+"  "+y[i].childNodes[0].nodeValue+"</br>");
}
</script>
<div id="result"></div>
</body>
</html>
Lets assume that I have an input box on a page. I click a button and whatever is in the input, is transferred to another page and retrieved using JavaScript.
Page1 = C:\Documents\page1.html
Page1 code:
<!DOCTYPE html>
<html>
<body>
<p>Name: <input type="text" id="user_input"</input></p>
<button onclick="start_page_2()">submit</button>
<script>
var start_page_2 = function(){
contents = document.getElemeentById("user_input").value;
//code to go to page 2;
}
</script>
</body>
</html>
Page2 = C:\Documents\page2.html
Page2 code:
<DOCTYPE html>
<html>
<body>
<h1 id="my_title">empty</h1>
<script>
//on load execute this {
//retrive contents from page1 and save as contents
//document.getElementById("my_title").innerHTML(contents);
//}
</script>
</body>
</html>
*Note that the input will contain spaces (if that's any help). All useful answers will be voted up.
You could just use localStorage
page1
<!DOCTYPE html>
<body>
<p>Name: <input type="text" id="user_input"</input></p>
<button onclick="start_page_2()">submit</button>
<script>
var start_page_2 = function(){
var contents = document.getElementById("user_input").value;
localStorage.setItem('user', contents);
window.location.href = 'page2.html';
}
</script>
</body>
</html>
page2
<DOCTYPE html>
<body>
<h1 id="my_title">empty</h1>
<script>
var full_name = localStorage.getItem('user');
document.getElementById("my_title").innerHTML = full_name;
</script>
</body>
</html>
This only works if you use an actual webserver to test your pages, and there's a polyfill for older browsers on MDN