How do I get my code to work from a USB on all devices?

Question

I use a USB stick to hold all my code for a concept website I'm creating. I have an issue where all my buttons are anchored to go to a G: drive on Windows. But when I use a chromebook I have, it doesn't classify the usb as a G: drive it gets classified as a removeable media stick. So none of the buttons work proplerly. Also, I don't know if this currently relates to the topic but I also thought I would mention that the Chromebook I use is a school chromebook so I can't do anything Linux related as it does have restrictions on it that are admin blocked. I just thought I should mention, I am not especially good at using this platform. I joined about 3 days ago so I'm pretty new here.

I used some JavaScript which I don't currently have or remember. It was something along the lines of if file one doesn't open report an error to a console and try opening file two. I would have expected it to try and open the windows file(fileone) and when it wouldn't find that file it would try to open the chrome one(filetwo) and work.

Here is my current code. (I changed some of the names because it discloses some info I don't want on the web, it's a concept website for a school) Edit: Ha, I am sorry, I should have been more specific. I meant my buttons. My buttons don't lead to proper file paths because of the device change.

HTML

<div class="container">
<link rel="stylesheet" href="Homepage.css">
<script src="Homepage.js"></script>
<title>(schoolname) C </title>
<head> 
    <Div id="Info">
<p id="Infotext"> InformationAboutSchoolGoesHere</p>
</Div>
</head>
<body>
    <div id="imgmaindiv">
    <img src="https://th.bing.com/th/id/R.24cfe6cd3910c78823b3392b238b96fb?rik=d0P6PWa8DkHh4A&riu=http%3a%2f%2fi0.kym-cdn.com%2fentries%2ficons%2foriginal%2f000%2f003%2f338%2f320px--Insert_image_here-.svg.png&ehk=DiZEo3mrhc61UU55lzUVloegyab5VdeMjBBWsCSpvGU%3d&risl=&pid=ImgRaw&r=0" alt="Pic w/ Logo">
</div>
<div id="NavButtons">
<a href="G:\HomePage.html"><button style="vertical-align: middle"; id="Theactualbuttons">Home</button></a>
<a href="G:\Information\Info.html"><button style="vertical-align: middle" id="Theactualbuttons" id="Information">Information</button></a>
<a><button style="vertical-align: middle" id="Theactualbuttons">Curriculum</button></a>
<a><button style="vertical-align: middle" id="Theactualbuttons">Staff Directory</button></a>
<a><button style="vertical-align: middle" id="Theactualbuttons">Student Activities</button></a>
<a><button style="vertical-align: middle" id="Theactualbuttons">Organizations</button></a>
</div>
<div id="WelcomeM">
<p id="WelcomeMText1"> Welcome to Portage North Middle School </p>
<h1 id="WelcomeMText"> At (InsertSchoolName), we provide a safe and educational enviornment for our students along with fun. Our school welcomes you.</h1>
</div>
<div id="ChromebookRepair">
<h2 id="ChromebookRepairT">Chromebook Repair</h2>
<p id="ChromebookRepairT"> If your chromebook is broken please bring it to the front office. Before coming please fill out this form</a>. There may be a charge for repairing your chromebook depending on damage levels. Please try not to touch any forms of damage in case you get injured or damage your chromebook more. Please let our tech people handle it.
 </p>
 <img id="chromebookimage" src="https://i.ibb.co/MkSHNfQ/image-removebg-preview-1.png">
</div>
<div id="Events">
    <h2 id="eventstitle">Events</h2>
    <table class="table">
        <thead>
            <tr>
                <th class="table">Event</th>
                <th class="table">Event Time</th>
                <th class="table">Rescheduled?</th>
                <th class="table">Passed?<th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="table">Mid-Winter Break</td>
                <td class="table">RemovedForReasons</td>
                <td class="table">No</td>
                <td class="table">Yes</td>
            </tr>
            <tr>
                <td class="table">5th Grade Welcome Night</td>
                <td class="table">RemovedForReasons</td>
                <td class="table">Yes</td>
                <td class="table">No</td>
            </tr>
            <tr>
                <td class="table">Parent-Teacher Conferences</td>
                <td class="table">RemovedForReasons</td>
                <td class="table">No</td>
                <td class="table">No</td>
            </tr>
        </tbody>
        </table>
</div>
<div id="...Overview">
<img src="https://imagetolink.com/ib/7qTFL0fuOG.png" alt="NMS's Overview" id="NMSOverview1">
</div>
</body>```

Does this answer your question? [Why can't I do ?](https://stackoverflow.com/questions/4090712/why-cant-i-do-img-src-c-localfile-jpg) — Karl Knechtel, Mar 03 '23 at 01:59
@KarlKnechtel if that were the issue, it wouldn't work when the drive letter is correct. — Ryan M, Mar 03 '23 at 04:14

score -3 · Answer 1 · answered Mar 03 '23 at 00:31

Get the OS with JavaScript and change the file path.

<html>

<body>
  <img id="img">
  <script>
    let fileName;

    const ua = window.navigator.userAgent;
    console.log(ua);

    if (ua.indexOf("Windows NT") != -1) {
      console.log("Windows");
      fileName = "file:///D:/neko.png"
    }
    else if (ua.indexOf("CrOS") != -1) {
      console.log("ChromeOS");
      fileName = "file:///media/removable/USB%20Drive/neko.png"
    }

    document.getElementById("img").src = fileName;

  </script>
</body>

</html>

I'm sorry, I am about to go edit my post. I meant the buttons on my website. More explained in the edited verison. — KBest002, Mar 03 '23 at 00:43

How do I get my code to work from a USB on all devices?

1 Answers1