0
Donc j'apprends un peu de Javascript, et j'ai essayé quelques choses différentes pour le faire mais je n'arrive pas à l'obtenir. Je voudrais que le bouton bascule ou ait un autre bouton qui peut cacher le xml dans la table. Jusqu'à présent, j'ai essayé d'ajouter un autre bouton avec une fonction onclick et de définir la fonction pour effacer. J'ai également essayé d'ajouter une instruction else avec une fonction définie sur display = none. Je suis un newb total à javascript et Im essayant toujours de travailler mon chemin à travers l'apprentissage.Comment puis-je effacer le XML ou le tableau?
// Groups Script
function showGroup() {
\t "use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
groupFunction(this);
}
};
xhttp.open("GET", "groups.xml", true);
xhttp.send();
}
function groupFunction(xml) {
\t "use strict";
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Book Title</th><th>Group Leaders</th><th>When Group Meets</th><th>Where Group Meets</th></tr>";
var x = xmlDoc.getElementsByTagName("GROUP");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("BOOK")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("LEADERS")[0].childNodes[0].nodeValue +
"</td><td>" +
\t x[i].getElementsByTagName("DAY")[0].childNodes[0].nodeValue +
\t "<br />" +
\t x[i].getElementsByTagName("TIME")[0].childNodes[0].nodeValue +
"</td><td>" +
\t x[i].getElementsByTagName("ROOM")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("group").innerHTML = table;
}
// Leadership Script
function showLeaders() {
\t "use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
leaderFunction(this);
}
};
xhttp.open("GET", "leadership.xml", true);
xhttp.send();
}
function leaderFunction(xml) {
\t "use strict";
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Leader</th><th>Ministry</th><th>Email</th></tr>";
var x = xmlDoc.getElementsByTagName("LEADER");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("MINISTRY")[0].childNodes[0].nodeValue +
"</td><td>" +
\t x[i].getElementsByTagName("EMAIL")[0].childNodes[0].nodeValue +
\t "</td></tr>";
}
document.getElementById("leaders").innerHTML = table;
}
// ministries script
function showMinistry() {
\t "use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
ministryFunction(this);
}
};
xhttp.open("GET", "ministries.xml", true);
xhttp.send();
}
function ministryFunction(xml) {
\t "use strict";
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Name of Ministry</th><th>Leader</th><th>Target Audience</th></tr>";
var x = xmlDoc.getElementsByTagName("MINISTRY");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("LEADERS")[0].childNodes[0].nodeValue +
"</td><td>" +
\t x[i].getElementsByTagName("TARGET")[0].childNodes[0].nodeValue +
\t "</td></tr>";
}
document.getElementById("ministry").innerHTML = table;
}
// outreaches script
function showOutreaches() {
\t "use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
outreachFunction(this);
}
};
xhttp.open("GET", "outreaches.xml", true);
xhttp.send();
}
function outreachFunction(xml) {
\t "use strict";
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Name of Ministry</th><th>Leader</th><th>Target Audience</th></tr>";
var x = xmlDoc.getElementsByTagName("OUTREACH");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("PLACE")[0].childNodes[0].nodeValue +
"</td><td>" +
\t x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue +
\t "</td></tr>";
}
document.getElementById("outreaches").innerHTML = table;
}
// sermons script
function showSermon() {
\t "use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
sermonFunction(this);
}
};
xhttp.open("GET", "sermons.xml", true);
xhttp.send();
}
function sermonFunction(xml) {
\t "use strict";
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Name of sermon</th><th>Date</th><th>Who is Preaching</th><th>Notes</th></tr>";
var x = xmlDoc.getElementsByTagName("SERMON");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue +
"</td><td>" +
\t x[i].getElementsByTagName("PASTOR")[0].childNodes[0].nodeValue +
\t "</td><td>" +
\t x[i].getElementsByTagName("NOTES")[0].childNodes[0].nodeValue +
\t "</td></tr>";
}
document.getElementById("sermon").innerHTML = table;
}
//clear forms
function clearTable() {
\t "use strict";
document.getElementById("group").reset();
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Viral Ministries</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="xml.js"></script>
</head>
<body>
<div id="logo">
\t <img src="images/logoViral2.png" width="360px" height="180px" />
</div>
\t \t <ul>
\t \t \t <li><a href="about.html">About</a></li>
\t \t \t <li><a href="groups.xml">Groups</a></li>
\t \t \t <li><a href="leadership.xml">Leadership</a></li>
\t \t \t <li><a href="ministries.xml">Ministries</a></li>
\t \t \t <li><a href="outreaches.xml">Outreaches</a></li>
\t \t \t <li><a href="sermons.xml">Sermons</a></li>
\t \t \t <li><a href="signup.html">Sign Up</a></li>
\t \t </ul>
\t <table width="50%" height="auto" id="main" align="center">
\t \t <tr>
\t \t \t <td>
\t \t \t \t <button type="button" onclick="showGroup()">Growth Groups</button><button type="button" onclick="clearForm()">Clear</button>
\t \t \t \t <table id="group"></table>
\t \t \t </td>
\t \t \t <td>
\t \t \t \t <button onclick="showLeaders()">Who Our Leaders are</button>
\t \t \t \t <table id="leaders"></table>
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t <td>
\t \t \t \t <button onclick="showMinistry()">What Ministries we Support</button>
\t \t \t \t <table id="ministry"></table>
\t \t \t </td>
\t \t \t <td>
\t \t \t \t <button onclick="showOutreaches()">Upcoming Outreaches</button>
\t \t \t \t <table id="outreaches"></table>
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t <td>
\t \t \t \t <button onclick="showSermon()">Upcoming Sermons</button>
\t \t \t \t <table id="sermon"></table>
\t \t \t </td>
\t \t </tr>
\t </table>
\t
</body>
</html>
laquelle est la ligne problématique? 'document.getElementById (" groupe "). reset();' ?? – Airwavezx
Vous voulez cacher le tableau sur click? –
Oui c'était ma dernière tentative pour le faire fonctionner. Oui Je souhaite masquer le tableau lors d'un clic. –