I'm trying to load a XML in a simple page and show the contents of a group of tags, but I'm having some problems.
When I press the button to trigger function, nothing happens. I want to get an alert for every tag named "misil_aire_aire_otan" with it's value. What am I doing wrong?
Here's what I have right now:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PracticeDOM</title>
<script type="text/javascript">
function myfunction(){
if (window.XMLHttpRequest) {
var xhttp = new XMLHttpRequest();
}
xhttp.open("GET","avionesPractica.xml",false);
xhttp.send();
var xmlDoc = xhttp.responseXML;
var misil_aire_aire_otan = xmlDoc.getElementsByTagName("misil_aire_aire_otan");
var textAPintar = "Éstos son los misiles aire de la otan : <br>";
for (var i = 0; i < misil_aire_aire_otan.length; i++) {
alert(misil_aire_aire_otan[i].childNodes[0].nodeValue)
}
}
</script>
</head>
<body>
<p id="paragraf_1"></p>
<br>
<form name="formulari1">
<button type="button" id="myBtn" onclick="myFunction()">Try it</button>
<br><br>
<table id="taulaAvions" border=1>
</table>
</form>
</body>
</html>
Here's the code fixed:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>M04 - UF3 – NF2 – pràctica 3 - exercici 1</title>
<script type="text/javascript">
function myfunction(){
if (window.XMLHttpRequest) {
var xhttp = new XMLHttpRequest();
}
xhttp.open("GET","avionesPractica.xml",false);
xhttp.send();
var xmlDoc = xhttp.responseXML;
console.log(xmlDoc);
var misil_aire_aire_otan = xmlDoc.getElementsByTagName("misil_aire_aire_otan");
var textAPintar = "Éstos son los misiles aire de la otan : <br><br>";
for (var i = 0; i < misil_aire_aire_otan.length; i++) {
textAPintar = textAPintar + misil_aire_aire_otan[i].childNodes[0].nodeValue +"<br>";
}
document.getElementById("paragraf_1").innerHTML = textAPintar;
}
</script>
</head>
<body onload="myfunction()">
<p id="paragraf_1"></p>
<br>
<form name="formulari1">
<br><br>
<table id="taulaAvions" border=1>
</table>
</form>
</body>
Related
I'm new to JS and I'm just practicing. I have this form that sets data in an object which is later displayed on the DOM. It works but it just shows a "key" at a time. If I add new elements they replace the existing one.
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
document.getElementById('box').innerHTML = newIt.namee + " " + newIt.surnamee
}
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
I've tried the push() method but it works with arrays. I've also tried to create an object instead of a class but I get the same grief
Thank you in advance
Maybe you looking for this:
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
document.getElementById('box').innerHTML += `<p>` + newIt.namee + " " + newIt.surnamee + `</p>`;
}
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
let html = `${document.getElementById('box').innerHTML}<p>${newIt.namee} ${newIt.surnamee}</p>`
document.getElementById('box').innerHTML = html
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
</body>
</html>
Hope it help :)
or you can use this
https://www.w3schools.com/jsref/met_node_appendchild.asp
any stored value can be wrapped in a div tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
</body>
</html>
<script>
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
const row = document.createElement('div');
row.innerText = newIt.namee + " " + newIt.surnamee;
document.getElementById('box').appendChild(row);
}
</script>
I have a simple text file:
Text1
Text2
Text3
TextN
And would like to create an interface where each time the user presses the next button the text area will be populated with the next text. I guess I have to use an array for that but I am having problems changing the text with the next button. Moreover the code I have only works on Firefox. Does this mean that when I put the website on a server this will be interpreted by Firefox clients only?
function test() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var contents = xmlhttp.responseText;
myArray = contents.split("\n");
}
}
xmlhttp.open("GET", "deeds.txt", true);
xmlhttp.send();
}
function nextDeed() {
document.getElementById('deed').innerHTML = myArray[0]
}
<html>
<body>
<h1 align="center" style="font-family:Arial;">RELATION TAGGING </h1>
<textarea id="deed" rows="15" cols="160"></textarea>
<input type="button" value="next" onclick="nextDeed()" /><br/>
<div id="result">Result</div>
</body>
</html>
step = 0;
$("#next").click(function(){
step = step +1;
$.ajax({
url: "./text.php?"+"step="+step,
success: function(data){
$("#deed").val(data);
}
});
});
;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center" style="font-family:Arial;" >RELATION TAGGING </h1>
<textarea id="deed" rows="15" cols="160">
</textarea>
<input type="button" id="next" value="next" /><br/>
<div id="result">Result</div>
</body>
</html>
PHP code : <?php $data = file_get_contents("file".$_GET["t"].".txt"); echo $data;?>
I am new to JavaScript. below is my code to print array once new item is added but not printing the array. can someone help. below is my code. I am also not getting any error in console. I have used push method to add new item to array and once added calling display function to print the array.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="item" >
<br>
<br/>
<input type="button" value="Push" onClick="Push()">
<input type="button" value="Pop" onClick="Pop()">
<input type="button" value="Shift" onClick="Shift()">
<input type="button" value="UnShift" onClick="UnShift()">
<div id="list_items"> </div>
<script type="text/javascript">
var arra1=[12,34,56,67,78,89,87];
function display()
{
var lists=document.getElementById('list_items');
document.write("Array items are:<br>" );
for(var i=0;i<arra1.length;i++)
{
var para = document.createElement('div');
lists.appendChild(para);
para.innerHTML = arra1[i];
}
}
function Push()
{
var item1=document.getElementById("item").value;
arra1.push(item1);
display();
}
function Pop()
{
arra1.pop();
display();
}
</script>
</body>
</html>
So I just Edited this a little bit and got it working.
var arra1=[12,34,56,67,78,89,87];
function display()
{
var lists=document.getElementById('list_items');
for(var i=0;i<arra1.length;i++)
{
var para = document.createElement('p');
lists.appendChild(para);
para.innerHTML = arra1[i];
}
}
function Push()
{
var item1=document.getElementById("item").value;
arra1.push(item1);
display();
}
function Pop()
{
arra1.pop();
display();
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="item" >
<br>
<br/>
<input type="button" value="Push" onClick="Push()">
<input type="button" value="Pop" onClick="Pop()">
<input type="button" value="Shift" onClick="Shift()">
<input type="button" value="UnShift" onClick="UnShift()">
<div id="list_items">
</div>
<scrip
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="JavaScript/CommonJS.js">
</script>
</head>
<body bgcolor="pink">
<div align="center" >
<h1> <font color="red" >JavaScript task</font></h1>
</div>
<div align="left" style="font-family:Verdana; font-size:13px">
Number of Characters Left:
<label id="lblcount" style="background-color:#E2EEF1;
color:Red;font-weight:bold;">100</label><br/>
<textarea style="overflow:auto;resize:none" id="mytextbox"
rows="4" cols="50" maxlength="100" wrap="hard"
onkeyup="LimtCharacters(this,100,'lblcount');"></textarea>
</div>
<p align="center">
<input type="button" id="view" name="view"
value="Next" onclick="SaveData()">
</p>
</body>
This is my index.jsp page when i click on next button it is going to CommonJS.js(javascript) there i'm saving the data in cookie and forwarding to Result.jsp,in Result.jsp page how can i read cookie and display it in my resul.jsp page
Javascript is:
function LimtCharacters(txtMsg, CharLength, indicator) {
var chars = txtMsg.value.length;
document.getElementById(indicator).innerHTML = CharLength - chars;
if (chars > CharLength) {
txtMsg.value = txtMsg.value.substring(0, CharLength);
}
}
function createCookie(cname,cvalue,exdays) {
if (exdays) {
var date = new Date();
date.setTime(date.getTime()+(exdays*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = cname+"="+cvalue+expires+";path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
Anybody guide me thanks in advance.
You can use the body onload="functioncall()" directive to call a function on load. To display it, a simple method would be to have a div in your page that will be filled with the cookie value from JavaScript.
The code would look like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function displayCookie() {
document.getElementById('myDiv').innerHTML = readCookie('myCookie');
}
</script>
</head>
<body onload="displayCookie()">
<div id="myDiv" ></div>
</body>
I dont understand why the button will not become active after it is enabled with the check box. I have got it to work without disabling the submit button but then it works independent of the checkbox being checked
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-
scalable=0, width=device-width;">
<title>Welcome to Tiffany & Co.</title>
<link rel="stylesheet" href="index.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!--Enable media queries in some unsupported subrowsers-->
<script type="text/javascript" src="css3-mediaqueries.js"></script>
<script type="text/javascript" src="main.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<script>
function submitAction()
{
var link = document.location.href;
var searchString = "redirect=";
var equalIndex = link.indexOf(searchString);
var redirectUrl = "";
if (document.forms[0].action == "")
{
var url = window.location.href;
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i=0;i<pairs.length;i++)
{
var pos = pairs[i].indexOf('=');
if(pos == -1) continue;
var argname = pairs[i].substring(0,pos);
var value = pairs[i].substring(pos+1);
args[argname] = unescape(value);
}
document.forms[0].action = args.switch_url;
}
if(equalIndex >= 0)
{
equalIndex += searchString.length;
redirectUrl = "";
redirectUrl += link.substring(equalIndex);
}
if(redirectUrl.length > 255)
redirectUrl = redirectUrl.substring(0,255);
document.forms[0].redirect_url.value = redirectUrl;
document.forms[0].buttonClicked.value = 4;
document.forms[0].submit();
}
function reject()
{
alert("You will not be able to access the system!");
}
function loadAction() {
var url = window.location.href;
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos);
var value = pairs[i].substring(pos + 1);
args[argname] = unescape(value);
}
document.forms[0].action = args.switch_url;
}
</script>
<form method="post">
<input TYPE="hidden" NAME="buttonClicked" SIZE="16" MAXLENGTH="15" value="0">
<input TYPE="hidden" NAME="redirect_url" SIZE="255" MAXLENGTH="255" VALUE="">
<input TYPE="hidden" NAME="err_flag" SIZE="16" MAXLENGTH="15" value="0">
<h1>Welcome to Tiffany & Co.</h1>
<p id="desc">We're delighted to offer our customers complimentary Wi-Fi
while shopping in our store.</p>
<form>
<p id="terms">
<input id="termsCheckbox" type="checkbox"
onclick="this.form.submit.disabled = !this.checked"/> I have read and agreed to the Terms of Use
</p>
<p id="error">
Please agree to the Terms of Use by checking the box.
</p>
<p class="connect">
<input id="connect" type="button" name="submit" value="Accept"
class="button" disabled="disabled" onclick="submitAction();">
</p>
</form>
<div id="logo">
<img src="logo.png" width="108" height="14" alt="Tiffany & Co."
/>
</div>
</div>
</body>
</html>
Your code works fine, it's a mess, but it works. The issue is this:
Uncaught ReferenceError: submitAction is not defined
The cause of the issue is that you don't have a closing brace on submitAction()
Here's a working demo. I've also cleaned up your code!
Properly formatting and indenting your code is very important. Not only does it look good and makes it easier to read, you will easily spot mismatched/missing braces.
Try with this
$(function(){
$('#termsCheckbox').change(function(){
$('#connect').prop('disabled', !this.checked);
}
});