Update the display using a button without the need to refresh the entire webpage

Question

Update the display using a button without the need to refresh the entire webpage

I am currently working on a website project that requires randomized output. I have successfully implemented a solution using Javascript, but the output only changes when the page is reloaded. Is there a way to update the output without refreshing the entire page, possibly by clicking a button? Below is my existing code:

    <DOCTYPE html>
    <html>
        <head>
            <title>Strat Roulette - R6S Edition</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <link rel="stylesheet" href="strats.css">
            <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
var request = new XMLHttpRequest();
request.onload = function() {
    // get the file contents
    var fileContent = this.responseText;
    // split into lines
    var fileContentLines = fileContent.split( '\n' );
    // get a random index (line number)
    var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
    // extract the value
    var randomLine = fileContentLines[ randomLineIndex ];

    // add the random line in a div
    document.getElementById( 'strats-output' ).innerHTML = randomLine;
};
request.open( 'GET', 'strats.txt', true );
request.send();
</script>
        </head>

        <body>
            <div id="content">
                <div class="textshadow">
                    <h1>Strat Roulette</h1>
                    <h2>Rainbow 6 Siege Edition</h2>
                </div>
                <div id="strat">
                        <code><div id="strats-output"></div></code>
                </div>
                <button type="button" class="btn btn-primary" onClick="window.location.reload()">Get New Strat</button>
                </div>
            </body>

            <footer style="clear: both;">
            <p class="alignleft">&#169; Skiletro <?php echo date("Y"); ?></p> <p class="alignright"><a href="./strats.txt">strats.txt</a></p>
            </footer>
</html>

javascript

Answer 1

Answer №1

function fetchRandomStrat(){
  var request = new XMLHttpRequest();
request.onload = function() {
    // grab the file content
    var fileContent = this.responseText;
    // split into lines
    var fileContentLines = fileContent.split( '\n' );
    // get a random index (line number)
    var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
    // extract the value
    var randomLine = fileContentLines[ randomLineIndex ];

    // display the random line in a div
    document.getElementById( 'strats-output' ).innerHTML = randomLine;
};
request.open( 'GET', 'strats.txt', true );
request.send();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <link rel="stylesheet" href="strats.css">
            <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
</script>
            <div id="content">
                <div class="textshadow">
                  
     <button onclick="fetchRandomStrat()">REFRESH CONTENT</button>
                    <h1>Strat Roulette</h1>
                    <h2>Rainbow 6 Siege Edition</h2>
                </div>
                <div id="strat">
                        <code><div id="strats-output"></div></code>
                </div>
                <button type="button" class="btn btn-primary" onClick="window.location.reload()">Gimme New Strat</button>
                </div>
            </body>

            <footer style="clear: both;">
            <p class="alignleft">&#169; Skiletro <?php echo date("Y"); ?></p> <p class="alignright"><a href="./strats.txt">strats.txt</a></p>
            </footer>

Furthermore, you might want to trigger it on page load as well.

You can simply encapsulate the request logic in a function and call it when the button is clicked.

Answer 2

function fetchRandomStrat(){
  var request = new XMLHttpRequest();
request.onload = function() {
    // grab the file content
    var fileContent = this.responseText;
    // split into lines
    var fileContentLines = fileContent.split( '\n' );
    // get a random index (line number)
    var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
    // extract the value
    var randomLine = fileContentLines[ randomLineIndex ];

    // display the random line in a div
    document.getElementById( 'strats-output' ).innerHTML = randomLine;
};
request.open( 'GET', 'strats.txt', true );
request.send();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <link rel="stylesheet" href="strats.css">
            <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
</script>
            <div id="content">
                <div class="textshadow">
                  
     <button onclick="fetchRandomStrat()">REFRESH CONTENT</button>
                    <h1>Strat Roulette</h1>
                    <h2>Rainbow 6 Siege Edition</h2>
                </div>
                <div id="strat">
                        <code><div id="strats-output"></div></code>
                </div>
                <button type="button" class="btn btn-primary" onClick="window.location.reload()">Gimme New Strat</button>
                </div>
            </body>

            <footer style="clear: both;">
            <p class="alignleft">&#169; Skiletro <?php echo date("Y"); ?></p> <p class="alignright"><a href="./strats.txt">strats.txt</a></p>
            </footer>

Furthermore, you might want to trigger it on page load as well.

You can simply encapsulate the request logic in a function and call it when the button is clicked.

Answer 3

Answer №2

To execute your AJAX code, create a function and call it when the button is clicked:

function fetchNewData(){
    var request = new XMLHttpRequest();
    request.onload = function() {
      // Retrieve file contents
      var fileContent = this.responseText;
      // Split into lines
      var fileContentLines = fileContent.split( '\n' );
      // Get a random index (line number)
      var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
      // Extract the value
      var randomLine = fileContentLines[ randomLineIndex ];

      // Display the random line in a div
      document.getElementById( 'strats-output' ).innerHTML = randomLine;
  };
  request.open( 'GET', 'strats.txt', true );
  request.send();
  }

Next,

<button type="button" class="btn btn-primary" onClick="fetchNewData()">Get New Strategy</button>

Check out this codepen link:

Answer 4

To execute your AJAX code, create a function and call it when the button is clicked:

function fetchNewData(){
    var request = new XMLHttpRequest();
    request.onload = function() {
      // Retrieve file contents
      var fileContent = this.responseText;
      // Split into lines
      var fileContentLines = fileContent.split( '\n' );
      // Get a random index (line number)
      var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
      // Extract the value
      var randomLine = fileContentLines[ randomLineIndex ];

      // Display the random line in a div
      document.getElementById( 'strats-output' ).innerHTML = randomLine;
  };
  request.open( 'GET', 'strats.txt', true );
  request.send();
  }

Next,

<button type="button" class="btn btn-primary" onClick="fetchNewData()">Get New Strategy</button>

Check out this codepen link:

Update the display using a button without the need to refresh the entire webpage

Answer №1

Answer №2

Similar questions

Converting keyValue format into an Array in Angular using Typescript

Prioritize returning AJAX data over iterating through the parent loop

When the webpage is refreshed, a PHP code embedded within JavaScript is executed instead of waiting for a

Having trouble navigating through multiple layers of nested array data in react js

Navigating through parent folder HTML files from child folder HTML files

Struggling to establish a functioning proxy in my React and Node application

Adjust the browser zoom level to default when navigating to a new page

What is the process for removing a specific row from a datatable?

TimeStamp Recorder - Typescript

Implementing raw static HTML files in webpack: a step-by-step guide

"Quotes are essential in Javastript syntax for specifying string values

Continuous loop of images displayed in a slideshow (HTML/JavaScript)

Discover how to display the loading time and memory usage of a web page on the footer using the jQuery and AngularJS library

The tooltip for the Google+ button stopped working

Can a CSS hover effect transition modify the color scheme?

Tips for incorporating personalized form and input directives in AngularJS while addressing issues with transcluded scope

An expected expression was encountered near the if condition

Updating the color of text when clicking on a link using javascript

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

The Navbar's Toggle Icon Causes Automatic Window Resize