Hi, I'd like to change the integer of a variable in html just like Javascript-CodePudding

I am a newbie in html and this is the question: When the button is pressed I want the h1 to change by 1 number


    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>HTML</title>
  
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <var id="k">dj</var>
  <h1 id="dk">ue</h1>
  <button onclick="change()">he</button>
  <!-- Project -->
  <script>
    function change() {
      document.getElementById("k").innerHTML  = 1;
    }
  </script>
</body>
</html>

For example when the button is pressed I'd like the h1 to change by 1,2,3...

I know this question is kinda confusing but I would really appreciate your answers!

CodePudding user response：

The H1 element is "dk" and the innerHTML is a string so needs to be converted to a number then added.

 function change() {
      let p = document.getElementById("dk");
    p.innerHTML = parseInt(p.innerHTML) 1;
 }

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>HTML</title>
  
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <var id="k">dj</var>
  <h1 id="dk">ue</h1>
  <button onclick="change()">he</button>
  <!-- Project -->
  <script>
    function change() {
         var n = parseInt(document.getElementById("dk").innerHTML) || 0;
        document.getElementById("dk").innerHTML = n   1;
    }
  </script>
</body>
</html>

CodePudding user response：

 // try this code
        var count=0
        function change() {
              count  
              document.getElementById("k").innerHTML=count;
        }

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="k">dj</h1>
  <h1 id="dk">ue</h1>
  <button onclick="change()">he</button>
  <!-- Project -->
 
</body>
</html>