无法通过.getElementById方法使用p元素的javascript更改innerHTML

这是HTML代码===>''

<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<link rel="stylesheet" href="./main.css">
<script type="text/javascript" src="./main.js"></script>
</head>
<body>
<div class="container">
<div class="head">
<h1>Counter</h1>
</div>
<div class="number">
<h1 id='num'></h1>
</div>
<div class="buttons">
<button class="btn" name="lower-count" id="btn-1" onclick="lowerCount()">Lower Count</button>
<button class="btn" name="add-count" id="btn-2" onclick="addCount()">Add Count</button>
</div>
</div>
</body>

这是我的Javascript==>''

var currentNum= document.getElementById('num').innerhtml = 0;

.innerHTML()的HTML部分应该是全大写的。

Javascript函数区分大小写，应该按照如下方式编写。注意大写HTML部分：

document.getElementById('num').innerHTML = 0;

还要注意，你做了两次任务，不确定这是否是偶然的。我删除了

var currentNum =

从一开始。

document.getElementById('num').innerHTML=3;

<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<link rel="stylesheet" href="./main.css">
<script type="text/javascript" src="./main.js"></script>
</head>
<body>
<div class="container">
<div class="head">
<h1>Counter</h1>
</div>
<div class="number">
<h1 id='num'></h1>
</div>
<div class="buttons">
<button class="btn" name="lower-count" id="btn-1" onclick="lowerCount()">Lower Count</button>
<button class="btn" name="add-count" id="btn-2" onclick="addCount()">Add Count</button>
</div>
</div>
</body>

应该是document.getElementById('num').innerHTML = 0;

document.getElementById('num').innerHTML = 0;

function addCount(){
document.getElementById('num').innerHTML= (+document.getElementById('num').innerHTML) + 1
}

function lowerCount(){
document.getElementById('num').innerHTML= (+document.getElementById('num').innerHTML) - 1
}

<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<link rel="stylesheet" href="./main.css">
<script type="text/javascript" src="./main.js"></script>
</head>
<body>
<div class="container">
<div class="head">
<h1>Counter</h1>
</div>
<div class="number">
<h1 id='num' value=''></h1>
</div>
<div class="buttons">
<button class="btn" name="lower-count" id="btn-1" onclick="lowerCount()">Lower Count</button>
<button class="btn" name="add-count" id="btn-2" onclick="addCount()">Add Count</button>
</div>
</div>
</body>

而不是这个：

var currentNum= document.getElementById('num').innerhtml = 0;

您需要键入以下内容：

var currentNum= document.getElementById('num').innerHTML = 0;

您需要将innerHTML 的html部分大写

相关内容

最新更新

热门标签：