I need to detect a user's OS, then include HTML from another file depending on which OS the user has. The rebuilt site has jQuery scripts from the old site that need to be kept, so my attempts partially utilized that. They don't have to.
When I try to run my script, nothing is displayed. I am new to JS.
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
if (OSName = "Windows") {
$(function(){
$("#downloadsection").load("apple_download_include.html");
});
} else if (OSName = "MacOS") {
$(function(){
$("#downloadsection").load("windows_download_include.html");
});
} else if (OSName = "UNIX") {
document.getElementById("downloadsection").innerHTML= "<a class="'btn btn-labeled btn-danger me-sm-3 fw-bold mt-3'" href="'download.php#unix_distros'" role="'button'"><span class="'btn-label'"><i class="'fa-brands fa-linux'"></i></span> Download v<span class="'current-version'"></span></a>";
} else if (OSName = "Linux") {
document.getElementById("downloadsection").innerHTML= "<a class="'btn btn-labeled btn-danger me-sm-3 fw-bold mt-3'" href="'download.php#unix_distros'" role="'button'"><span class="'btn-label'"><i class="'fa-brands fa-linux'"></i></span> Download v<span class="'current-version'"></span></a>";
} else {
document.getElementById("downloadsection").innerHTML= "<a class="'btn btn-danger btn-lg px-4 me-sm-3 fw-bold mt-3'" href="'download.php'" role="'button'">Download v<span class="'current-version'"></span></a>";
}
Consider the following.
var OSName = "unknown";
var navApp = navigator.userAgent.toLowerCase();
switch (true) {
case (navApp.indexOf("win") != -1):
OSName = "windows";
break;
case (navApp.indexOf("mac") != -1):
OSName = "apple";
break;
case (navApp.indexOf("linux") != -1):
OSName = "linux";
break;
case (navApp.indexOf("x11") != -1):
OSName = "unix";
break;
}
console.log(OSName, navApp);
if (OSName == "windows" || OSName == "apple") {
$("#downloadsection").load(OSName + "_download_include.html");
} else {
var link = $("<a>", {
class: "btn btn-labeled btn-danger me-sm-3 fw-bold mt-3",
role: "button",
href: "download.php#unix_distros"
}).appendTo("#downloadsection");
$("<span>", {
class: "btn-label"
}).appendTo(link);
$("<i>", {
class: "fa-brands fa-linux"
}).appendTo($("span.btn-label", link));
$("span.btn-label", link).append(" Download v<span class='current-version'>0.0.1</span>");
if (OSName != "unix" && OSName != "linux") {
link.toggleClass("btn-label btn-lg px-4");
$(".fa-brands", link).remove();
link.attr("href", "download.php");
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="downloadsection"></div>This uses switch() which is just an organized form of multiple if statements. It simple performs the code snippet for the matched case.
I corrected all logical operators and condensed the code. No reason to repeat the code for the same items.
Regarding navigator.appVersion:
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible
navigator.userAgent is supported by all browsers. See More: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
As others in the above comments pointed out - replace = with == or === in your if statements. As a single = is an assignment operator.
please refer to the JavaScript's documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
Also the strings in your assignments are incorrect. If you are using double quotes to enclose the whole string then use only single quotes inside. Or vice versa.
your string assignment will look like this then:
document.getElementById("downloadsection").innerHTML= "<a class='btn btn-labeled btn-danger me-sm-3 fw-bold mt-3' href='download.php#unix_distros' role='button'><span class='btn-label'><i class='fa-brands fa-linux'></i></span> Download v<span class='current-version'></span></a>";