how to display a javascript var in html body

F

10

71

I am looking for a way to call a javascript number in the body of an html page. This does not have to be long and extravagant just simply work, I just want something like:

<html>
<head>
<script type="text/javscript">
var number = 123;
</script>
</head>

<body>
<h1>"the value for number is: " + number</h1>
</body>
</html>

Filament answered 29/11, 2016 at 5:32 Comment(2)

you need to assign with <span> tag and from javascript id attribute to set value – Intorsion 29/11, 2016 at 5:38

Please check this link:-#30427469 – Harwin 29/11, 2016 at 5:42

I

82

Try This...

<html>

<head>
  <script>
    function myFunction() {
      var number = "123";
      document.getElementById("myText").innerHTML = number;
    }
  </script>
</head>

<body onload="myFunction()">

  <h1>"The value for number is: " <span id="myText"></span></h1>

</body>

</html>

Intorsion answered 29/11, 2016 at 5:50 Comment(0)

W

54

Use document.write().

<html>
<head>
  <script type="text/javascript">
    var number = 123;
  </script>
</head>

<body>
    <h1>
      the value for number is:
      <script type="text/javascript">
        document.write(number)
      </script>
    </h1>
</body>
</html>

Wristlet answered 29/11, 2016 at 5:39 Comment(0)

I

4

<html>
<head>
<script type="text/javascript">
var number = 123;
var string = "abcd";

function docWrite(variable) {
    document.write(variable);
}
</script>
</head>

<body>
<h1>the value for number is: <script>docWrite(number)</script></h1>

<h2>the text is: <script>docWrite(string)</script> </h2>
</body>
</html>

You can shorten document.write but can't avoid <script> tag

Isothermal answered 14/2, 2019 at 9:24 Comment(0)

M

1

You can do the same on document ready event like below

<script>
$(document).ready(function(){
 var number = 112;
    $("yourClass/Element/id...").html(number);
// $("yourClass/Element/id...").text(number);
});
</script>

or you can simply do it using document.write(number);.

Meanie answered 29/11, 2016 at 5:39 Comment(0)

S

1

Here is another way it can be done .

function showData(m)
{
    let x ="<div> added from js ";
    let y = m.toString();
    let z = "</div>";
    let htmlData = x+y+z ;
    content.insertAdjacentHTML("beforeend",htmlData);
}

Slavey answered 16/8, 2021 at 17:29 Comment(0)

D

1

Use the document.write() method to dynamically write content to the HTML document.

<h1><script>document.write("the value for number is: " + number)</script></h1>

Make sure that the variable number is declared and has a value before this script is executed.

Damar answered 28/12, 2023 at 22:24 Comment(0)

I

0

<script type="text/javascript">
        function get_param(param) {
   var search = window.location.search.substring(1);
   var compareKeyValuePair = function(pair) {
      var key_value = pair.split('=');
      var decodedKey = decodeURIComponent(key_value[0]);
      var decodedValue = decodeURIComponent(key_value[1]);
      if(decodedKey == param) return decodedValue;
      return null;
   };

   var comparisonResult = null;

   if(search.indexOf('&') > -1) {
      var params = search.split('&');
      for(var i = 0; i < params.length; i++) {
         comparisonResult = compareKeyValuePair(params[i]); 
         if(comparisonResult !== null) {
            break;
         }
      }
   } else {
      comparisonResult = compareKeyValuePair(search);
   }

   return comparisonResult;
}

var parcelNumber = get_param('parcelNumber'); //abc
var registryId  = get_param('registryId'); //abc
var registrySectionId = get_param('registrySectionId'); //abc
var apartmentNumber = get_param('apartmentNumber'); //abc

        
    </script>

then in the page i call the values like so:

 <td class="tinfodd"> <script  type="text/javascript">
                                                    document.write(registrySectionId)
                                                    </script></td>

Interstadial answered 16/11, 2018 at 18:45 Comment(0)

S

-1

<?php
$x1='<span id="x1"></span><script>document.getElementById("x1").innerHTML = x1;</script>';
$x2='<span id="x2"></span><script>document.getElementById("x2").innerHTML = x2;</script>';
$x3='<span id="x3"</span><script>document.getElementById("x3").innerHTML = x3;</script>';
?>

<html><body>
<script> var 
  x1="123",
  x2="ABC", 
  x3=666; 
</script>
<?php echo $x1 ?><br>
<?php echo $x2 ?><be>
<?php echo $x3 ?><be>
</body></html>

Slumber answered 7/10, 2021 at 1:56 Comment(1)

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Diverticulitis 7/10, 2021 at 5:12

S

-2

Index.html:

<html>
<body>
    Javascript Version: <b id="version"></b>
    <script src="app.js"></script>
</body>
</html>

app.js:

var ver="1.1";
document.getElementById("version").innerHTML = ver;

Stomy answered 14/7, 2019 at 15:53 Comment(0)

T

-4

You cannot add JavaScript variable to HTML code.

For this you need to do in following way.

<html>
<head>
<script type="text/javscript">
var number = 123;

document.addEventListener('DOMContentLoaded', function() {
   document.getElementByTagName("h1").innerHTML("the value for number is: " + number);
});
</script>
</head>
<body>
<h1></h1>
</body>
</html>

Tattered answered 29/11, 2016 at 5:39 Comment(0)

Recommended topics

Hot tags