Firefox full version number in HTML file-CodePudding

I have built an HTML start page that can be expanded according to your own wishes. The experts among you certainly see a lot of room for improvement. However, I am currently trying to automatically enter the current full version number of the Firefox browser in line 106, where the number 99.0 is currently located. (Linux Mint 19.3 mit Firefox Browser 99.0) I've already spent a lot of time on this, but I can't find a suitable solution. That's why I'm asking you, does anyone have a suitable idea? Here is the code:

<!DOCTYPE html> 
<html lang="de">
<head> 
    <title>Menue</title>
    <meta charset="utf-8" /> 
    <style>
    
    body { background:url(ff3.jpg) fixed; margin:0px; zoom:1.00; -moz-transform:scale(1.00); }
    a:link { text-decoration:none; font-weight:normal; color:#3246ff; }
    a:visited { text-decoration:none; font-weight:normal; color:#800000; }
    a:hover { text-decoration:none; font-size:115%; color:#FFFFFF; background-color:#800000; border-radius: 80px !important; border:none!important; }  
    a:before { content: "»   "; color:#000000; }     

/* grid layout, 3 columns */
.wrapper {
  display: grid; /* display: inline-grid;*/
  grid-template-columns: 1fr 1fr 1fr; /* 3 x 1 fraction */
  align-content:space-center;
  justify-content:center;
  margin-top: 50px;   
}

      :hover {
    animation-play-state: paused;
  }

.scroller {
  width: 30px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

.example1 {
  height: 80px;
  color:#800000;
  overflow: hidden;
  position: relative;
}
.example1 h3 {
    position: absolute;
    width: 120%;
    height: 90%;
    margin: 0;
    line-height: 90px;
    text-align: center;


    /* Starting position */
       -moz-transform:translateX(100%);
       -webkit-transform:translateX(100%);  
       transform:translateX(100%);

 /* Apply animation to this element */  
       -moz-animation: example1 25s linear infinite;
       -webkit-animation: example1 25s linear infinite;
       animation: example1 25s linear infinite;
}

/* Move it (define the animation) */
      @-moz-keyframes example1 {
       0%   { -moz-transform: translateX(100%); }
       100% { -moz-transform: translateX(-100%); }
      }
      @-webkit-keyframes example1 {
       0%   { -webkit-transform: translateX(100%); }
       100% { -webkit-transform: translateX(-100%); }
      }
      @keyframes example1 {
       0%   { 
       -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
       transform: translateX(100%);         
       }
       100% { 
       -moz-transform: translateX(-100%); /* Firefox bug fix */
       -webkit-transform: translateX(-100%); /* Firefox bug fix */
       transform: translateX(-100%); 
       }
      }
    </style>
  </head>
  <body>

<br><br>
<div style="display: table; width: 100%; height: 100px;">
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><img src="pag37.gif"></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center; vertical-align: middle;"><img src="pag107.gif"></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><img src="pag37.gif"></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center; vertical-align: middle;"><img src="pag107.gif"></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><img src="pag37.gif"></figure>
</div>

<script>
    var fullVersion  = '' parseFloat(navigator.appVersion);
    var fullVersion = nAgt.substring(verOffset 8);
    var vers = fullVersion
    if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset 8);
}
  </script>

<div >
   <h3 style="font-size:22px">    Achim's Internetportal - Betriebssystem Linux Mint 19.3 mit Firefox Browser 99.0 in der 64 Bit-Version    </h3> // Line 106!!!
</div>

</body> 
</html>

<table border="5" cellspacing="5" bordercolor=#990000 height="420px" width="100%">
<tr style="font-family:Verdana; font-style:bold italic; font-size:16px;">
<td width="33%" valign="top">
<ul>
<a HREF="https://www.chip.de/" target="_blank">Chip - Online</a>  Computer-Nachrichten  «<br>
</ul>
</td>
<td width="33%" valign="top">
<ul>
<a HREF="https://www.linuxmintusers.de/" target="_blank">Linuxmintusers</a> Systemunterstützung  «<br>
</ul>
</td>

<td width="33%" valign="top">
<ul>
<a HREF="https://www.tippscout.de/computer/linux" target="_blank">Tippscout</a> praktische Tipps zu Linux  «<br>
</ul>
</td>
</tr>
</table>

CodePudding user response：

Put the div before the script and try this:

<div >
    <h3 style="font-size:22px">    Achim's Internetportal - Betriebssystem Linux Mint 19.3 mit Firefox Browser $(fullVersion) in der 64 Bit-Version    </h3>
</div>

<script>
    if ((verOffset = navigator.userAgent.indexOf("Firefox")) != -1) {
        var agent = navigator.userAgent;
        var index = agent.indexOf("Firefox/");
        var fullVersion = agent.substr(index   8)
        var div = document.getElementsByClassName("example1")[0];
        var h3 = div.getElementsByTagName('h3')[0];
        h3.innerText = "    Achim's Internetportal - Betriebssystem Linux Mint 19.3 mit Firefox Browser "   fullVersion   " in der 64 Bit-Version    ";            
    }
</script>

You search the example1 div and the h3 that is contained in it. Then, you set the text.