admin管理员组

文章数量:1425709

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.

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="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>

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.

  • javascript
  • jquery
  • html
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 MuccagelatoMuccagelato 721 silver badge9 bronze badges 5
  • 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

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;
  });
 }

or 

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

本文标签： javascriptchange p content with text file oneStack Overflow

版权声明：本文标题：javascript - change p content with text file one - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745456889a2659144.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。