Search code examples
javascriptscrollmarquee

Horizontal text scrolling with JavaScript function?


I currently have a text box with some default text in it. When a button is clicked, the text is changed. Is it possible to have the new text scrolling? I've looked at marquee but it seems it doesn't have good rep, and I'm not sure how to incorporate it with JavaScript. Here's the coding I have:

HTML text box:

<tr>
    <td colspan="4" class="message">
        <p class="displaymessage">
             <marquee behavior="scroll" direction="left">innterHTML Page</marquee>
        </p>
    </td>
</tr>

(this currently scrolls the default text)

HTML Button:

<input type="button" value="1" class="button" onClick="changeText1()">

Javascript:

function changeText1() {

     var paragraph = document.getElementsByClassName('displaymessage');

     var changeText = paragraph[0].innerHTML = "New text";
}

Any suggestions? Thanks


Solution

  • I don't understand what you want to do. But if you want to add new text and want to scroll it left as your previous text is scrolling i.e ** innterHTML Page** then you can use the following code in javascript:-

       function changeText1() {
    
    var paragraph = document.getElementsByClassName('displaymessage');
    
    var changeText = paragraph[0].innerHTML = '<marquee behavior="scroll" direction="left">New text Here</marquee>';
    
    }
    

    It will work Fine. If you have any questions you can comment :)