1

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

Thomas Iacconi
  • 31
  • 3
  • 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. – Jon Nezbit Nov 15 '21 at 00:30

2 Answers2

0

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>
Jon Nezbit
  • 323
  • 3
  • 12
  • Hello, the code you have sent does not appear to do anything for me, I am opening it using XAMPP and opening the php file is not a problem but when I click on the button it doesn't display different lines from my .txt file. Is it just copy pasting the code or are there any additional steps I have to take. ` – Thomas Iacconi Nov 15 '21 at 04:46
  • Whats your PHP version? What did you name your file? Is you file in the same directory as the php file? File should have multiple lines, where each line is the word that completes "I love.. " quote. – Jon Nezbit Nov 15 '21 at 14:46
  • My PHP version is "PHP 7.3.29", the files are all located in the same directory (in this case in the htdocs folder I made a folder with my php, css and txt files), in the .txt files there are various lines but it doesn't show any when I click on the button. The name is getlines.txt and I have changed it in the .php to that address. – Thomas Iacconi Nov 15 '21 at 15:32
  • Do you get any errors? Have you checked you JS console? I mean, you are not really helping me help you with "it doesnt work bro". – Jon Nezbit Nov 15 '21 at 22:36
  • Hello, I have found an alternative that only uses php but thank you very much for helping me. It is greatly appreciated. – Thomas Iacconi Nov 16 '21 at 03:24
-1

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>
James T. Harding
  • 59
  • 3