<p id="numpr">34.99</p>如何用js将p标签中的内容提取出来并与5相乘,将相乘后的数字在前端页面原来位置显示
时间: 2024-03-25 10:37:39 浏览: 15
可以使用类似上面的方法,不同之处在于不需要创建新的p标签元素,而是直接将相乘后的数字替换掉原先的内容。具体实现步骤如下:
1. 获取p标签元素。
2. 获取p标签中的内容并将其转换为数字类型。
3. 计算相乘后的结果。
4. 将相乘后的数字作为新的内容替换掉原先的内容。
以下是示例代码:
```javascript
// 获取p标签元素
var numpr = document.getElementById("numpr");
// 获取p标签中的内容并将其转换为数字类型
var num = parseFloat(numpr.innerHTML);
// 计算相乘后的结果
var result = num * 5;
// 将相乘后的数字作为新的内容替换掉原先的内容
numpr.innerHTML = result;
```
这样就可以将相乘后的数字在前端页面原来位置显示了。
相关问题
<p id="numpr">34.99</p>如何用js将p标签中的内容提取出来并与5相乘,将相乘后的数字在前端页面显示
可以使用JavaScript中的DOM操作来实现。首先,需要获取到包含数字的p标签的元素,可以使用document.getElementById()方法来获取。然后,可以使用innerHTML属性获取到p标签中的内容,并将其转换为数字类型。接下来,将转换后的数字与5相乘,并将结果赋值给一个变量。最后,可以使用document.createElement()方法创建一个新的p标签元素,并使用appendChild()方法将相乘后的数字添加到新的p标签中,并将其添加到HTML文档中显示出来。
以下是示例代码:
```javascript
// 获取p标签元素
var numpr = document.getElementById("numpr");
// 获取p标签中的内容并将其转换为数字类型
var num = parseFloat(numpr.innerHTML);
// 计算相乘后的结果
var result = num * 5;
// 创建新的p标签元素
var newpr = document.createElement("p");
// 将相乘后的数字添加到新的p标签中
newpr.appendChild(document.createTextNode(result));
// 将新的p标签添加到HTML文档中显示出来
document.body.appendChild(newpr);
```
此段代码在函数外的numvalue4根本不会随函数里面的变化而变化,换一个能变化的代码。var numvalue4 = 0; // 定义全局变量 var minus = document.querySelector(".nummbe #minus"); minus.onclick = function(){ numvalue4 = parseInt(document.getElementById("nummbe-value").value); numvalue4=numvalue4-1; if (numvalue4<0){ numvalue4=0; } document.getElementById("nummbe-value").value = numvalue4; var numpr = document.getElementById("numprice"); numpr.innerHTML=(34.99*numvalue4); } var plus = document.querySelector(".nummbe #plus"); // 修复变量名错误 plus.onclick = function(){ numvalue4 = parseInt(document.getElementById("nummbe-value").value); numvalue4=numvalue4+1; document.getElementById("nummbe-value").value = numvalue4; var numpr = document.getElementById("numprice"); numpr.innerHTML=(34.99*numvalue4); }
可以将numvalue4定义为全局变量并且放在函数内部,这样就可以随函数里面的变化而变化了。修改后的代码如下:
function updateNumValue() {
var numvalue4 = parseInt(document.getElementById("nummbe-value").value);
var numpr = document.getElementById("numprice");
numpr.innerHTML = (34.99 * numvalue4);
}
var minus = document.querySelector(".nummbe #minus");
minus.onclick = function() {
var numvalue4 = parseInt(document.getElementById("nummbe-value").value);
numvalue4 = numvalue4 - 1;
if (numvalue4 < 0) {
numvalue4 = 0;
}
document.getElementById("nummbe-value").value = numvalue4;
updateNumValue();
}
var plus = document.querySelector(".nummbe #plus");
plus.onclick = function() {
var numvalue4 = parseInt(document.getElementById("nummbe-value").value);
numvalue4 = numvalue4 + 1;
document.getElementById("nummbe-value").value = numvalue4;
updateNumValue();
}
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)