getElementById from a txt file

Question

I'm trying to get ElementById from a txt file and pass it into marquee class. Do I need a javascript function for this?

Also, I can't get the white-space: nowrap to work. Here is what I have put together so far. The javascript function credit goes to Sid function readTextFile

function readTextFile(file){
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file, false);
            rawFile.onreadystatechange = function ()
            {
                if(rawFile.readyState === 4)
                {
                    if(rawFile.status === 200 || rawFile.status == 0)
                    {
                        var allText = rawFile.responseText;
                        alert(allText);
                    }
                }
            }
            rawFile.send(null);
        }

@-webkit-keyframes scroll {
 0% {
   -webkit-transform: translate(0 ,0);
  } 
  100%{
    -webkit-transform: translate(-100%, 0);
  }
}

.marquee {
 display:block;
 width:100%
 white-space: nowrap;
 overflow:hidden;
}

.marquee span {
 display:inline-block;
 padding-left:100%;
 -webkit-animation:scroll 15s infinite linear;

<!DOCTYPE html>
<html lang='en'>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 
  <link rel="stylesheet" href="main.CSS" type="text/CSS">
 </head>
 <body>
  <h1 class="marquee"><span><a href= readTextFile(&quot;file:///:/Users/justair07/Documents/cssmarquee/Message.txt&quot;)"> Test </a>.</span></h1>
 </body>
</html>

Any help is much appreciated. I'm brand new to html, javascript, and css but I'm excited to learn.

Thank you!

*"Do I need a javascript function for this?"* - Yes.... So what have you attempted? — Paulie_D, Jun 28 '18 at 11:24
Hello and welcome to Stack Overflow! :) Did you already try something? If yes, can you add your attempt to your question? That would make it a lot easier to help you! — CodeF0x, Jun 28 '18 at 11:26
Sorry if my attempt is poor. I'm learning and don't have much any experience with the language or syntax. I'm been trying to piece together what I can for 2 days now. — justair07, Jun 28 '18 at 11:47

score 0 · Answer 1 · answered Jun 28 '18 at 13:40

You need to get span element and replace its content (I've added id attribute to span element for simplicity: compare first two lines in snippet - commented one is shorter).

white-space: nowrap should be applied for span element.

Remove that <a> element and call your readTextFile in js snippet. Replace alert(allText) with document.getElementsByClassName("marquee")[0].children[0].innerHTML = allText (or make it simpler)
Demo below shows how to replace strings:

//document.getElementById("mytext").innerHTML = "some test"
document.getElementsByClassName("marquee")[0].children[0].innerHTML = "some test"

setTimeout(function(){
  document.getElementById("mytext").innerHTML = "bla bla bla"
}, 7000)

@-webkit-keyframes scroll {
 0% {
   -webkit-transform: translate(0 ,0);
  } 
  100%{
    -webkit-transform: translate(-100%, 0);
  }
}

.marquee {
 display:block;
 width:100%
 white-space: nowrap;
 overflow:hidden;
}

.marquee span {
 display:inline-block;
 padding-left:100%;
  white-space: nowrap;
 -webkit-animation:scroll 15s infinite linear;

<!DOCTYPE html>
<html lang='en'>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 
  <link rel="stylesheet" href="main.CSS" type="text/CSS">
 </head>
 <body>
  <h1 class="marquee"><span id="mytext">Need Text File String Here</span></h1>
 </body>
</html>

@ barbsan thank you. I seem to be wrong on how I'm calling the function:
"readTextFile("file:///:/Users/justair/Documents/NewMarquee/message.txt")"
sorry I failed at using code tags, how do I do this? — justair07, Jun 28 '18 at 14:02
I saved both of the functions as a .js and did as you suggested but I seem to only get the same message "Need Text File String Here". — justair07, Jun 28 '18 at 16:53
@justair07 remove "readTextFile("file:///:/Users/justair/Documents/NewMarquee/message.txt")" from html part and move it to js file. Have you added `script` tag in html that will load your js file (like ``)? — barbsan, Jun 29 '18 at 06:28
I guess I need to step myself through the process properly. First things first, I'm trying to replicate your demo. I have 3 files saved, one for the html code saved as .html, one for the js function saved as .js and one for the css code saved as .css. All are saved in my documents in the same folder. When I run the html file I get a marquee that says "Need Text File String Here". In your demo I actually see "some test" then it changes to "blah blah blah". This makes me think that I'm doing something wrong to cause the js function to not be seen. Can you tell me what I'm doing wrong? — justair07, Jun 29 '18 at 11:39

getElementById from a txt file

1 Answers1

"readTextFile("file:///:/Users/justair/Documents/NewMarquee/message.txt")"