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>
Related
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>
I am working on a simple page that contains 2 iframes. Text is input into iframeA and once a button is clicked on iframeB I want it to display the text from iframeA but it just displays undefined. I feel like I am close but cannot seem to see what I am doing wrong. The code for both iframe pages is below.
--iframeA (ifr1.htm)
<html>
<head>
<script type="text/javascript">
var var_name = document.getElementById("textbox").value;
</script>
<body>
<input type="text" name"textbox" id="textbox"/>
</body>
</html>
--iframeB (ifr2.htm)
<html>
<body>
<script type="text/javascript">
function f2(txt){
var name2 = parent.ifr1.var_name;
document.getElementById('div2').innerHTML = name2;
}
</script>
<div id="div2"></div>
<button onclick="f2('complete')"></button>
</body>
</html>
parent.ifr1.var_name;
I would recommend parent.frames.ifr1.var_name
it just displays undefined:
var var_name = document.getElementById("textbox").value;</script>
</script>
…
<input type="text" name"textbox" id="textbox"/>
You're assigning the value of the input only once, when the document is loading (I doubt that it works at all actually). When you later type anything in, the value of var_name never changes.
Instead, you want to get the value when the button is clicked:
function f2(txt){
var name2 = parent.frames.ifr1.document.getElementById("textbox").value;
document.getElementById('div2').innerHTML = name2;
}
(and you can remove the script from ifr1.htm). Alternatively, use this for the first iframe:
<html>
<head>
<body>
<input type="text" name"textbox" id="textbox"/>
<script type="text/javascript">
var var_name;
document.getElementById("textbox").onchange = function(e) {
var_name = this.value;
};
</script>
</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
first.html
<!DOCTYPE html>
<html>
</head>
<body>
<form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
</form>
</body>
</html>
other.js
function validateUsernamePassword()
{
var idNum = $("#userId").val();
alert('Well the id is :' + idNum);
// more code
}
The alert doesn't print the passed ID ... why ?
Modify your html like this:
<html>
<head>
<title></title>
</head>
<body>
<form>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
<input type="hidden" id="userId"></input>
</form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
</body>
</html>
Or you could do just this:
function validateUsernamePassword()
{
var idNum = localStorage.getItem("idNumber");
alert('Well the id is :' + idNum);
// more code
}
The second one is good since you already have the item in localstorage, so ther is no need of assign its value to another element
this trick may help you:
<html>
<head>
</head>
<body>
<dl>
<script>
window.var1 = "hello, world";
</script>
<input type="button" value="click" onclick="clicked()">
<script>
function clicked(){
alert(window.var1);
};
</script>
</body>
I have a JavaScript variable and I want the HTML div to output 7.
I know it's simple, but I can't seem to get my head around this.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ball = 3+4;
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
Give a specific id to the div like:
<div id="data"></div>
Now use the following JavaScript code.
<script type="text/javascript">
var ball = 3+4;
document.getElementById("data").innerHTML=ball;
</script>
Working code is here
Write your script in body.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Have 7 output here</div>
<script type="text/javascript">
var ball = 3+4;
document.getElementsByTagName('div')[0].innerHTML = ball;
</script>
</body>
</html>
Try this:
<head>
<script type="text/javascript">
var ball = 3+4;
function op()
{
document.getElementById('division').innerHTML=ball;
}
</script>
</head>
<body onload="op();">
<div id="division">Have 7 output here</div>
</body>
Fiddle
HTML
<html>
<body>
<div id="add_results_7"></div>
</body>
</html>
JavaScript
<script>
var ball = 3+4;
document.getElementById('add_results_7').innerHTML=ball; // Gives you 7 as your answer
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onload = function () {
var ball = 3 + 4;
var div = document.getElementsByTagName("div")[0];
div.innerHTML = ball;
};
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
onload is executed when the page is fully loaded, so the DIV is ready to be manipulated. getElementsByTagName("div") returns a list of all DIVs in the page, and we get the first one ([0]) since there is only one DIV in your code.
Finally, I guess innerHTML doesn't require any explanation :-)