How do adjust html output based on operating system?

Question

Problem definition

I need to put text similar to the following on a web page:

If the user is operating on a Windows based system, I want them to see:

Look for the file C:\Users\yourname\dir1\dir2\filename on your Windows PC

If the user is operating on an OS X based system, I want them to see:

Look for the file /Users/yourname/dir1/dir2/filename on your Macintosh PC

If the user is operating on[any other|Linux] based system, I want them to see:

Look for the file /home/yourname/dir1/dir2/filename on your Linux PC

Research

I have managed to create three almost identical javascripts that partially work. One script gives me the value of the osHomeDir, another osType, and the other gives me the value of the osSeparator. My problem is that I don't know how to get these values out of the java script and into my webpage consistently. What I get is that the first substitution works, but I can't repeat it - for instance, on my Mac I see:

Look for the file /Users/yournamedir1dir2filename on your Macintosh PC rather than the desired: Look for the file /Users/yourname/dir1/dir2/filename on your Macintosh PC

Note how only the FIRST substitution of osSeparator worked.

Desired outcome

I'm hoping someone can show me two things:

How to make the scripts more efficient - three almost identical scripts could surely be changed into one that returned three values
The ability to be able to use the result more than once (as happened in my example)
Notes

Don't get too concerned about THIS example - I have simplified it to make it readable. I have the same problem in many places. I know I COULD solve this one my returning the whole sentence in the one script, but that would miss the point entirely.

My code

<!DOCTYPE html>
<html>
<body>

<p> Look for the file <a id="osHomeDirId"></a><a id="osSeparatorId"></a>yourname<a id="osSeparatorId"></a>dir1<a id="osSeparatorId"></a>dir2<a id="osSeparatorId"></a>filename on your <a id="osTypeId"></a> PC</p>

<script>
var osHomeDir = "/home";
if (window.navigator.platform.indexOf("Win") != -1) osHomeDir="C:&#92Users";
if (window.navigator.platform.indexOf("Mac")!=-1) osHomeDir="/Users";
document.getElementById("osHomeDirId").innerHTML=osHomeDir;
</script>

<script>
var osType = "Linux";
if (window.navigator.platform.indexOf("Win") != -1) osType="Windows";
if (window.navigator.platform.indexOf("Mac")!=-1) osType="Macintosh";
document.getElementById("osTypeId").innerHTML=osType;
</script>

<script>
var osSeparator = "/";
if (window.navigator.platform.indexOf("Win") != -1) osSeparator="&#92";
document.getElementById("osSeparatorId").innerHTML=osSeparator;
</script>


</body>
</html>

possible duplicate of [How to find the operating system version using JavaScript](http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript) — Mike Samuel, Apr 01 '14 at 19:24
It's hardly a duplicate. This looks more like a problem of the user wanting to refactor his three variations of the same script, as well as misunderstanding how `getElementById` works, and that setting `innerHTML` does not work the same way as setting the `html()` value using `jQuery` on a collection. — nzifnab, Apr 01 '14 at 19:26

Max Meijer · Answer 1 · 2014-04-02T08:46:25.630

1

You use document.getElementById() which only gets the first element with the specified id. Also you shouldn't use id's multiple times. You should make it a class instead. You need to use document.getElementsByClassName() which returns an array, then loop through all the elements of that array and set the innerHTML properties to osSeparator.

var separators=document.getElementsByClassName("osSeparatorId");
for(var i=0;i<separators.length;i++){
    separators[i].innerHTML=osSeparator;
}

Then you need to change the html to <a class="osSeparatorId">

edited Apr 02 '14 at 08:46

answered Apr 01 '14 at 19:30

Max Meijer

1,494
1
14
22

thanks for the reply. I have modified my code (see below) but my result is even less successful than before - I don't even get one "osSeparatorId" :( – rednectar Apr 01 '14 at 22:05
I edited my answer with a normal for loop, it should work now – Max Meijer Apr 02 '14 at 08:46

score 0 · Accepted Answer · answered Apr 02 '14 at 11:47

Working Answer:

I changed approach to use functions instead of getElementsByClassName

I can now get the "desired" outcome, but I'm sure there could be some more efficiencies added to the script to save the if...if else...if else construction at the end.

Here's the code that works:

<script>
function localised() {
var printItem=arguments[0];
var osHomeDir="/home";
var osSeparator="/";
var osType="Linux";
if (window.navigator.platform.indexOf("Win") != -1) {
  osHomeDir="C:&#92Users";
  osType="Windows";
  osSeparator="&#92"
}
if (window.navigator.platform.indexOf("Mac")!=-1) {
  osHomeDir="/Users";
  osType="Macintosh";
}
if (printItem=="osHomeDir") document.write(osHomeDir);
else if (printItem=="osType") document.write(osType); 
else if (printItem=="osSeparator") document.write(osSeparator);

}
</script>

<p>Look for the file <script>localised("osHomeDir");</script><script>localised("osSeparator");</script>yourname<script>localised("osSeparator");</script>dir1<script>localised("osSeparator");</script>dir2<script>localised("osSeparator");</script>filename on your <script>localised("osType");</script> PC</p>

</body>
</html>

score 0 · Answer 3 · answered Apr 02 '14 at 23:50

Not an answer...yet

Clearly someone has got @Max Meijer's answer working (because it has been marked up) but when I try it, it still doesn't work. @Max (or anyone else) I invite you to edit this answer until it does work.

Remember: Desired output (eg on OS X)=>
Look for the file /Users/yourname/dir1/dir2/filename on your Macintosh PC

Output using Max's code above=>
Look for the file /Usersyournamedir1dir2filename on your Macintosh PC

Note that in this case not even a single instance of osSeparatorId is displayed.

And I still have 3 separate scripts to do pretty much the same job.

Proof that I've implemented Max's code exactly as described:

<!DOCTYPE html>
<html>
<body>

<!--Note that the following line is now using <a class="osSeparatorId"> instead of <a id="osSeparatorId"> --> 

<p> Look for the file <a id="osHomeDirId"></a><a class="osSeparatorId"></a>yourname<a class="osSeparatorId"></a>dir1<a class="osSeparatorId"></a>dir2<a class="osSeparatorId"></a>filename on your <a id="osTypeId"></a> PC</p>

<script>
var osHomeDir = "/home";
if (window.navigator.platform.indexOf("Win") != -1) osHomeDir="C:&#92Users";
if (window.navigator.platform.indexOf("Mac")!=-1) osHomeDir="/Users";
document.getElementById("osHomeDirId").innerHTML=osHomeDir;
</script>

<script>
var osType = "Linux";
if (window.navigator.platform.indexOf("Win") != -1) osType="Windows";
if (window.navigator.platform.indexOf("Mac")!=-1) osType="Macintosh";
document.getElementById("osTypeId").innerHTML=osType;
</script>

<!--Note that the following is cut and pasted from Max's answer-->    
<script>
var separators=document.getElementsByClassName("osSeparatorId");
for(var i=0;i<separators.length;i++){
    separators[i].innerHTML=osSeparator;
}
</script>


</body>
</html>