Take line from .txt file and display in html page-CodePudding

I want to make a small project for my girlfriend and what I had in mind was to have an HTML page that says "I Love". On the press of a button the website would display under the text a random line from a text document I have made with all the things I love about her. Example: What I managed

So I have managed to make a page with only the "I LOVE" and adding the text under it when I click the button. But I would like it to be able to take a random line from a .txt file where each line would be one line of text it would randomly choose and display on the html. Thanks

CodePudding user response：

You cant load from files on server from client side cuz that would be a huge no-no when it comes to security. Just imagine that. You need some back-end (server side) language like PHP.

Here is the most basic PHP code ( with comments ) that does what you want:

<?php
// you put your filename here ( obviously )
$fileName = "girl.txt";

// opening and reading file
$fileH = fopen( $fileName, "r") or die("Unable to open file!");
$fileCont = fread( $fileH,filesize( $fileName));
fclose($fileH);

// split text into lines
$lines = explode( "\r\n", $fileCont);
$numOfLines = count($lines);

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- import math module -->
    <script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.3.0/math.min.js></script>
</head>
<body>
    <!-- prints random choice to html code -->
    <h1>I Love</h1>
    <button>Click Me!</button>
    

    <script>
        // print php array into js
        <?php echo "lines = ['".join("', '", $lines)."'];\n"; ?>
        maxLineNum = <?php echo $numOfLines; ?>;

        // on button click you get random msg in h1
        document.querySelector("button").addEventListener( "click", ()=>{
            randNum = math.floor( math.random()*maxLineNum );
            document.querySelector("h1").textContent = "I love "   lines[randNum];
        } );

    </script>
</body>
</html>

CodePudding user response：

I am new to JavaScript, but I would try storing the snippets in an array in the JS itself rather than putting them in a separate text file than then needs to be accessed and processed before it can be used.

JS:

const niceSnippets = [
  ‘your smile’,
  ‘your sense of humour’, // repeat for as many snippets as you can think of
  ‘you’
];

const chooseSnippet = () => { niceSnippets[Math.floor(Math.random()*niceSnippets.length)]; }

const changeSnippet = () => { document.getElementById('snippetDisplay').innerText = chooseSnippet(); }

with the relevant elements in the HTML updated with id and onclick:

<p id=“snippetDisplay”></p>
<button onclick=“changeSnippet()”>Click Me!</button>