Как переключаться между добавлением и удалением текста Ajax - PullRequest
Новая
       0

Как переключаться между добавлением и удалением текста Ajax

0 голосов
/ 08 октября 2018

Я студент по программированию, я разработал это программирование, которое добавляет rain.text с сервера, который говорит, что «дождь в Испании остается в основном на равнине».Но я бы хотел, чтобы программа удаляла текст дождя, когда пользователь снова нажимает кнопку, а затем снова добавляю rain.txt, если пользователь нажимает кнопку еще раз.Любая помощь с тем, как подойти к этому, пожалуйста? 

<html>
<head>

<style>

#hidereveal
{
margin:auto;
width:90%;
height:auto;
border: 1px black solid;
text-align:center;
}

p
{
text-align:center;
}
</style>
</head>
<body>

<div id="hidereveal">

<p>this is a test, when you click the button and ajax will add in more data 
from the server<button type="button" onclick="loadDoc()">Click to read 
more</button></p>


</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
  document.getElementById("hidereveal").innerHTML += this.responseText;
}
};
xhttp.open("GET", "rain.txt", true);
xhttp.send();
 }
</script>

</body>




</html>

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Просто для интереса, вот версия, которую я разработал после некоторых проб и ошибок! В основном функция для отображения более или менее текста с использованием Ajax и без перезагрузки страницы, работает отлично. 

<html>
<head>

<style>

#hidereveal
{
margin:auto;
width:90%;
height:auto;
border: 1px black solid;
text-align:center;
}

p
{
text-align:center;
}
</style>
</head>
<body>

<div id="hidereveal">

<p>This is a test, when you click the button, ajax will add in more data 
from the server. <button type="button" onclick="loadDoc()">Read more or less! 
</button></p>
<div id="xml"></div>

</div>

<script>



function loadDoc() {
if(document.getElementById("xml").innerHTML == ''){

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("xml").innerHTML += this.responseText;
}
};
xhttp.open("GET", "rain.xml", true);
xhttp.send();
}
else 
{
document.getElementById("xml").innerHTML="";  
}



}

</script>


</body>
0 голосов
/ 08 октября 2018

Я бы заменил этот код 

document.getElementById("hidereveal").innerHTML += this.responseText;

на этот код 

let elem = document.getElementById("hidereveal")
elem.innerHTML !== '' ? elem.innerHTML = '' : elem.innerHTML += elem.innerHTML


<html>
<head>

<style>

#hidereveal
{
margin:auto;
width:90%;
height:auto;
border: 1px black solid;
text-align:center;
}

p
{
text-align:center;
}
</style>
</head>
<body>

<div id="hidereveal">

<p>this is a test, when you click the button and ajax will add in more data 
from the server<button type="button" onclick="loadDoc()">Click to read 
more</button></p>


</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let elem = document.getElementById("hidereveal");
elem.innerHTML !== '' ? elem.innerHTML = '' : elem.innerHTML += elem.innerHTML
}
};
xhttp.open("GET", "rain.txt", true);
xhttp.send();
 }
</script>

</body>




</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...