{ "apple": "苹果", "banana": "香蕉", "orange": "橙子" }用JavaScript在html中显示出来
时间: 2023-08-31 14:04:54 浏览: 60
你可以使用以下代码在HTML中显示给定对象的键和值对:
```html
<html>
<head>
<title>显示键值对</title>
</head>
<body>
<p>给定对象:</p>
<pre id="obj"></pre>
<script>
const obj = {
"apple": "苹果",
"banana": "香蕉",
"orange": "橙子"
};
const formattedObjStr = JSON.stringify(obj, null, 2);
document.getElementById('obj').textContent = formattedObjStr;
</script>
</body>
</html>
```
运行此代码将在HTML页面上显示以下内容:
给定对象:
```
{
"apple": "苹果",
"banana": "香蕉",
"orange": "橙子"
}
```
相关问题
最简单的方法Javascript 统计复选框选中个数并显示在html中
可以使用 JavaScript 遍历页面中的所有复选框元素,并计算选中的个数。然后将该数字显示在HTML页面中的某个元素中。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>统计复选框选中个数并显示在HTML中</title>
</head>
<body>
<h2>请选择您喜欢的水果:</h2>
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<input type="checkbox" name="fruit" value="orange">橙子<br>
<input type="checkbox" name="fruit" value="grape">葡萄<br>
<input type="checkbox" name="fruit" value="watermelon">西瓜<br>
<br>
<p>您已选中 <span id="count">0</span> 个水果。</p>
<script>
// 获取所有复选框元素
var checkboxes = document.getElementsByName("fruit");
// 给每个复选框元素绑定点击事件
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', function() {
// 计算选中的个数
var count = 0;
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
count++;
}
}
// 显示选中的个数
document.getElementById("count").innerHTML = count;
});
}
</script>
</body>
</html>
```
在这个示例中,我们先获取所有 name 属性为 "fruit" 的复选框元素,然后给每个元素绑定点击事件。每次点击事件都会重新计算选中的个数,并将其显示在页面的一个 span 元素中。
用JavaScript把字典显示到网页代码举例
使用JavaScript将字典(对象)显示到网页的代码示例如下:
HTML部分:
```html
<div id="dict"></div>
```
JavaScript部分:
```javascript
var dictionary = {
"apple": "苹果",
"banana": "香蕉",
"orange": "橙子"
};
var dictDiv = document.getElementById("dict");
var output = "";
for (var key in dictionary) {
output += key + ": " + dictionary[key] + "<br>";
}
dictDiv.innerHTML = output;
```
这段代码首先定义了一个字典对象dictionary,它包含三个键值对。然后通过getElementById方法获取到字典显示的div元素,并定义一个output字符串来存储最终显示出来的内容。通过遍历dictionary对象的所有键值对,每次循环将键和值连接成一行字符串并添加到output中。最后将output赋值给dictDiv元素的innerHTML属性,以便在网页上显示出来。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)