javascript - change p content with text file one

I'm coding my first website, now I'm trying to change a p content with the content of some text files, which contains long descriptions of what my site is about, actually I've tried many ways, like httprequest(), FileReader() and jquery get, but actually I haven't managed it,because I was running it locally and probably because of the wrong file position, so i created a new small code in witch I tried jquery get, I ran it on "web server for chrome" but it doesn't work.

this is the code:

<!DOCTYPE html>
<html>
<body>

<div><h2 id="demo">Lets change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>
<script       
   src=".12.4/jquery.min.js">
</script>
<script>
function loadDoc() {
    $.get("hello.txt",function(data){
    getElementById('demo').innerText= data;
  });
 }
</script>

 </body>
 </html>

when I load it, the p and the button are displayed, but when I click the button nothing happens; the .html and the .txt files are in the same folder. I'have been stuck on it for many days, please help, and don't mark it as duplicate.

any help is appreciate.

this is the code:

<!DOCTYPE html>
<html>
<body>

<div><h2 id="demo">Lets change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>
<script       
   src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
function loadDoc() {
    $.get("hello.txt",function(data){
    getElementById('demo').innerText= data;
  });
 }
</script>

 </body>
 </html>

any help is appreciate.

Share Improve this question edited Aug 16, 2016 at 10:49 Udhay Titus 5,8694 gold badges26 silver badges42 bronze badges asked Aug 16, 2016 at 10:14 Muccagelato 721 silver badge9 bronze badges

Could you put up ur code in JSFIddle? it would easy for us to debug your issue. If your .txt file has some sensitive content then put a dummy content and share link with us. – Smit Commented Aug 16, 2016 at 10:16
the code is only the one above, anyway: jsfiddle/tvgsx45g/#&togetherjs=SUJmCrpHql – Muccagelato Commented Aug 16, 2016 at 10:19
thank you guys, all the answer of yours works. – Muccagelato Commented Aug 16, 2016 at 10:27
1 well, all the answer are right, but the ajax one is the cooler... – Muccagelato Commented Aug 16, 2016 at 10:35
@Muccagelato Cool! I have updated my Plunker if you want to reference from. – Smit Commented Aug 16, 2016 at 10:41

Add a ment |

6 Answers 6

Sorted by: Reset to default 2

You could try this out

<script>
function loadDoc() {
    $.get("hello.txt",function(data){
    document.getElementById('demo').innerHTML= data;
  });
 }

</script>

HTML:

 <div><h2 id="demo">Lets schange this text</h2></div>

    <button type="button" onclick="loadDoc()">Change Content</button>
<button type="button" onclick="loadDocWithHttp()">Change Content from Http request</button>

Using AJAX:

function loadDocWithHttp() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "hello.txt", true);
  xhttp.send();
}

Try this

     function loadDoc() {
                $.ajax({
                    url : "hello.txt",
                    dataType: "text",
                    success : function (result) {
                        $("#demo").html(result);
                    }
                });
   }

First of all do one change in your script as mentioned below

function loadDoc() {
    $.get("hello.txt",function(data){
        $('#demo').html(data);
    });
}

For that button you have to bind click with delegation method on()

$(document).on('click','<your_button_selector>', function(){
    alert("hello") // replace and put your code here
});

Good Luck..!!

Instead of

getElementById('demo').innerText= data;

change to below line.

document.getElementById('demo').innerText= data;

Try this :

function loadDoc() {
    $.get("hello.txt",function(data){
    document.getElementById('demo').text= data;
  });
 }

function loadDoc() {
    $.get("hello.txt",function(data){
    document.getElementById('demo').innerHTML= data;
  });
 }

You can use jQuery Ajax function. The error attribute will be helpful to get the exception:

 $.ajax({
            url: "./seeds/hello.txt",
            async: false,
            success: function (data){
                pageExecute.fileContents = data;
            },
            error: function (e){
                //error print
            }
        });

1.can u browse http://url/hello.txt in your browner?

2.open the developer tools, does any errors show?

3.getElementById have to be used under document Object

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - change p content with text file one - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)