View image in Javascript

Asked

Viewed 1,216 times

1

I’m new to Javascript. I need to check if the user is browsing on an apple or android and depending on the condition, show the corresponding store button.

<script type="text/javascript">
    var dispositivo = navigator.userAgent.toLowerCase();
    console.log(dispositivo);
    if(dispositivo.search(/android/) > -1) {
        //Exibir o botão da play store
    } else if(dispositivo.search(/iphone/) > -1) {
        //Exibir o botão da apple store
    } else {
        console.log('Outro device');
    }

javascript

3 answers

1

You can use this function for this: 

/**
 * Determine the mobile operating system.
 * This function either returns 'iOS', 'Android' or 'unknown'
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
  {
    return 'iOS';

  }
  else if( userAgent.match( /Android/i ) )
  {

    return 'Android';
  }
  else
  {
    return 'unknown';
  }
}

You can see more options of how to do this here
I hope I’ve helped.

update

<script type="text/javascript">
    //Aqui você esconde todos os botões.
    $("#apple-store").hide();
    $("#google-play").hide();

    var dispositivo = navigator.userAgent.toLowerCase();
    console.log(dispositivo);
    if(dispositivo.search(/android/) > -1) {
        //Se for android você mostra esse.
        $("#google-play").show();
    } else if(dispositivo.search(/iphone/) > -1) {
        //Se for iphone você mostra esse.
        $("#apple-store").show();
    } else {
        //e assim sucessivamente.
        console.log('Outro device');
    } 
</script>

    <button id="apple-store">Apple Store</button>
    <button id="google-play">Google Play</button>

  • Actually this code that I passed the question is already bringing the correct device, now I need to show the image on the screen, I do not know how to show the image on the page, depending on the device.

  • You can do this in many ways I’ll put a simple way in the answer.

1

You can do it like this.

<script type="text/javascript">
var dispositivo = navigator.userAgent.toLowerCase();
console.log(dispositivo);
if(dispositivo.search(/android/) > -1) {
   var x = document.createElement("IMG");
   x.setAttribute("src", "android.jpg");
   x.setAttribute("width", "33");
   x.setAttribute("width", "33");
   document.body.appendChild(x);
} else if(dispositivo.search(/iphone/) > -1) {
   var x = document.createElement("IMG");
   x.setAttribute("src", "iphone.jpg");
   x.setAttribute("width", "33");
   x.setAttribute("width", "33");
   document.body.appendChild(x);
} else {
    console.log('Outro device');
}
</script>

  • to display the image in HTML?

  • What’s your question? Where do you want to display the image ?

  • Dude, I don’t work with Javascript, so I don’t know anything. I know the return is coming right, the image path, but I want to display the image on the page. <body> <script>console.log(x)</script> </body>

  • I made a change, see if it worked, if you don’t comment on the mistake you’re making.

  • Uncaught Typeerror: Cannot read Property 'appendchild' of null. Line 15: Document.body.appendchild(x);

  • How is the Html ?

  • Hello, good morning. Sorry for the delay, but on Friday I had to leave work and I am without net at home, fds week disconnected. The last thing I did was the code you passed above, I didn’t put anything in HTML and the following error appears on the console: index.html:15 Uncaught Typeerror: Cannot read Property 'appendchild' of null

Show 2 more comments

0


Thank you for your willingness to answer my question. With your help I managed to arrive at a satisfactory result. I know I can still improve, but from where I was I think it was a great progress. Below is the whole code.

<!DOCTYPE html>

Web Detect 

<script type="text/javascript">
    var dispositivo = navigator.userAgent.toLowerCase();
    // console.log(dispositivo);
    var teste = "teste";
    if(dispositivo.search(/android/) > -1) {
        document.write(dispositivo);
        function myFunction() {
                var x = document.createElement("IMG");
                x.setAttribute("src", "img/google-play.png");
                document.body.appendChild(x);
                document.getElementById('div').appendChild(x);
            }

    } else if(dispositivo.search(/iphone/) > -1) {
        document.write(dispositivo);    
        function myFunction() {
                var y = document.createElement("IMG");
                y.setAttribute("src", "img/apple-play.png");
                document.body.appendChild(y);               
                document.getElementById('div').appendChild(y);
            }

    } else {
        //e assim sucessivamente.
        document.write('Outro device');
        function myFunction() {
                var x = document.createElement("IMG");
                x.setAttribute("src", "img/google-play.png");
                document.body.appendChild(x);
                var y = document.createElement("IMG");
                y.setAttribute("src", "img/apple-play.png");
                document.body.appendChild(y);
                document.getElementById('div').appendChild(x);
                document.getElementById('div').appendChild(y);

            }
    } 
</script>


<div id="div">

</div>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.