Onload is not working properly as I expected on HTML Javascript

Question

I am developing a website in HTML and Javascript. On the website, I need to load a piece of code using onload . The problem is the onload is showing the alert message correctly but not the code I really wanted. This is the onload function code which can be found in the below code:

<script type="text/javascript"> 
       function nftlink() 
         { 
         document.getElementById("nftlink1").innerHTML = "<a-nft\r\n type=\"nft\"\r\n url=\"https:\/\/arjsusingweb.web.app\/trex\"\r\n
 smooth=\"true\"\r\n smoothCount=\"10\"\r\n smoothTolerance=\".01\"\r\n
 smoothThreshold=\"5\"\r\n >";
         alert("Image is loaded");
         } 
</script>

Can anyone please tell me what it is that I am doing wrong?

<!DOCTYPE html>
    <html>
    <head>
        <meat charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <title>ARJS</title>
        <meta name="viewport" content="width-device-width", initial-scale=1>
        <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
    </head>
    <style>
        .arjs-loader {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.8);
          z-index: 9999;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      
        .arjs-loader div {
          text-align: center;
          font-size: 1.25em;
          color: white;
        }
      </style>
    
    <body style="margin : 0px; overflow: hidden;" onload="nftlink()">
        <h1>Welcome To The main Area</h1>
        <div class="arjs-loader">
            <div>Loading, please wait...</div>
          </div>
          <a-scene
            vr-mode-ui="enabled: false;"
            renderer="logarithmicDepthBuffer: true;"
            embedded
            arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
          >
            <span id="nftlink1">
              <!-- The onload excicuted code Should Be Here -->
            
            
              <a-entity
                gltf-model="https://arjsusingweb.web.app/scene.gltf"
                scale="25 25 25"
                position="150 150 0"
              >
              </a-entity>
            </span>
            
          </a-scene>
        <script src="firebases.js"></script>
        <script src="main.js"></script>
        <script type="text/javascript"> 
          function nftlink() 
            { 
            document.getElementById("nftlink1").innerHTML = "<a-nft\r\n type=\"nft\"\r\n url=\"https:\/\/arjsusingweb.web.app\/trex\"\r\n smooth=\"true\"\r\n smoothCount=\"10\"\r\n smoothTolerance=\".01\"\r\n smoothThreshold=\"5\"\r\n >";
            alert("Image is loaded");
            } 
        </script>
    </body>
    </html>

Answer 1

I fixed it by moving the script to the headers

Onload is not working properly as I expected on HTML Javascript

Question

1 answers

solution1
0 2020-08-26 05:45:31

Onload is not working properly as I expected on HTML Javascript

Question

1 answers

solution1 0 2020-08-26 05:45:31

solution1
0 2020-08-26 05:45:31