Show different links based on Javascript function output

Question

I'm trying to display different possible links on a page depending on the user. For example, mobile users aren't allowed to submit data to our database. I found a Javascript function that detects mobile users, but I can't get its output to dictate the links that are shown to the user. In fact, when I try using the following code, no links show up at all.

</head>
  <body>
    </div>
    <div id="topcontent">
      <p align="center">
        <div id="banner">
          <p align="center">
            <script>
            function checkMobile(){
              if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                <a href="studyAreas.html">
                Wifi Study Areas</a>
                <a href="displayspeeds.html">
                  View all Speeds</a>
                  <a href="bestlocation.html">
                    Best Speed Near You</a>
                        <a href="squadfree/index.html">
                        About Us</a>
              }
              else{
                <a href="studyAreas.html">
                Wifi Study Areas</a>
                <a href="displayspeeds.html">
                  View all Speeds</a>
                  <a href="bestlocation.html">
                    Best Speed Near You</a>
                    <a href="userEnterInfo.html">
                      Add Speed Data</a>
                        <a href="squadfree/index.html">
                        About Us</a>
              }
            }
            </script>
          </p>
      </div>

      <div id="centercontent">
        <h3 align="center">
          Find the best study space</h3>
          <h1 align="center">
            Check Your Internet Speed With WiFly</h1>
            <p align="center">
              <img src="http://cdn.flaticon.com/png/256/15402.png" alt="wifi" />
            </p>
            <p align="center">
            </p>
      </div>
  </body>

well you cant just write html code in your javascript function. You could either fade in the correct html part for example, or fill the necessary elements with code (set innerhtml) — Frnak, Apr 27 '15 at 07:06
What @Fank Provost said is true and on top of that why are you adding div tags in paragraph tags? — Anand, Apr 27 '15 at 07:13

score 2 · Accepted Answer · answered Apr 27 '15 at 07:14

You cant use html code directly in your javascript like this.

<p id="content" align="center">

</p>

<script>
window.onload = function() {

        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            document.getElementById("content").innerHtml = '<a href="studyAreas.html">...';
        }
        else{
            document.getElementById("content").innerHtml = '<a href="studyAreas.html">...';
        }

}
</script>

This would follow your current approach. It might be better (and easier) if you just create your elements in 2 blocks and fadein the needed one.

<p id="content" align="center">
   <span id="mobile">...</span>

   <span id="desktop">...</span>
</p>

<script>

window.onload = function() {

        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            document.getElementById("desktop").style.display = 'none';
            document.getElementById("mobile").style.display = 'block';
        }
        else{
            document.getElementById("desktop").style.display = 'block';
            document.getElementById("mobile").style.display = 'none';
        }

}
</script>

It will be even more easy if you use jquery and just toggle the elements.

Important Note: By this you cant ensure people don't post data to your database. You should also check this in your backend

Update: As Anand said in the comments - you also should rethink your boxing. You cant add a div inside a paragraph. You should only use paragraphs if you directly add text to them.

Vijay · Answer 2 · 2015-04-27T07:28:35.507

You cannot just render HTML directly inside script tag. This syntax is allowed in ASP.NET Rajor but not for JavaScript.

Working Demo: http://jsfiddle.net/2tLzrzz8/

You should create the HTML string based on the condition and then assign the string as innerHTML of the surrounding container. For better performance, you can give a unique id to your container.

HTML:

 <p align="center" id="linkContainer">
 </p>

JavaScript:

function checkMobile(){
                var strHtml="";
              if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                strHtml='<a href="studyAreas.html">'
                        + 'Wifi Study Areas</a>'
                        + '<a href="displayspeeds.html">'
                        + 'View all Speeds</a>'
                        + '<a href="bestlocation.html">'
                        + 'Best Speed Near You</a>'
                        + '<a href="squadfree/index.html">'
                        + 'About Us</a>';
              }
              else{
               strHtml= '<a href="studyAreas.html">'
                        + 'Wifi Study Areas</a>'
                        + '<a href="displayspeeds.html">'
                        + 'View all Speeds</a>'
                        + '<a href="bestlocation.html">'
                        + 'Best Speed Near You</a>'
                        + '<a href="userEnterInfo.html">'
                        + 'Add Speed Data</a>'
                        + '<a href="squadfree/index.html">'
                        + 'About Us</a>';
              }

               document.getElementById("linkContainer").innerHTML=strHtml;
            }

//finally call the function.
checkMobile();

You declare `var html` but assign the html to the global `strHtml`. Probably a typo. — dting, Apr 27 '15 at 07:19

Show different links based on Javascript function output

2 Answers2