Question

当用户点击按钮时，我希望以下格式在我的网页上显示以下数据：

car1 - id：1346 - 键入宝马

car2 - id：1379 - 输入Holden

等...

我到底该怎么做呢？我试过这个：

document.getElementById('message').innerHTML = car1

但所有显示的都是'[object Object]'

    var car1 = {id:"1346", type:"BMW"};
    var car2 = {id:"1379", type:"Holden"};
    var car3 = {id:"2580", type:"Ford"};
    var cararray = [car1, car2, car3];

Answer 1

您可以使用.<property>访问汽车信息，其中<property>在这种情况下为.id或.type。

要获得所有汽车，您需要循环浏览cararray，并在每个循环中将其添加到消息中。

＆＃13;

var car1 = {id:"1346", type:"BMW"};
var car2 = {id:"1379", type:"Holden"};
var car3 = {id:"2580", type:"Ford"};
var cararray = [car1, car2, car3];

var message = '';

for (var i = 0; i < cararray.length; i++) {
    var car = cararray[i];
    
    message += "car" + (i + 1) + " - id:" + car.id + " - type " + car.type + "\n";
}

alert(message);

＆＃13;

alert(message)用作示例，您可以将其替换为document.getElementById('message').innerHTML = message，并在将消息附加到消息时使用<br />代替\n。

Answer 2

我建议您使用项目符号列表（ul）并只附加cararray数组中的元素。

var cararray = [{id:"1346",type:"BMW"},{id:"1379",type:"Holden"},{id:"2580",type:"Ford"}], 
    content = document.getElementById('message'),
    btn = document.getElementById('btn');

cararray.forEach(function(v,i) {
    var el = document.createElement('li');
    el.innerHTML = `car${i+1} - id: ${v.id} - type: ${v.type}`;
    content.appendChild(el);
});

btn.addEventListener('click', function() {
    content.style.display = 'block';
});

ul {
  list-style-type: none;
}

<button id='btn'>reveal list</button>
<ul id='message' hidden></ul>

Answer 3

你明确地怀疑你要渲染的变量，你不能将一个对象变换为字符串。你可以这样做：

document.getElementById('message').innerHTML = JSON.stringify(car1)
//Return {"id":"1346","type":"BMW"}

或者像这样：

userList

Answer 4

您可以使用循环来迭代数组并显示您需要的内容

var car1 = {
  id: "1346",
  type: "BMW"
};
var car2 = {
  id: "1379",
  type: "Holden"
};
var car3 = {
  id: "2580",
  type: "Ford"
};
var cararray = [car1, car2, car3];

function display() {
  let message = "";
  cararray.forEach((car,i)=>message += "car"+(i+1)+" - id:"+car.id+" - type "+car.type+"</br>");
  document.getElementById('message').innerHTML = message;
}

<button onclick="display()">Display</button>
<p id="message"></p>

Answer 5

    <html>
    <head>
    <script>
    function myFun()
    {
        var car1 = {id:"1346", type:"BMW"};
        var car2 = {id:"1379", type:"Holden"};
        var car3 = {id:"2580", type:"Ford"};
        var cararray = [car1, car2, car3];
        var cart="";
        for(var x=0; x<cararray.length; x++)
        {
          if(x==cararray.length)
            cart = cart + "car"+x+ "- id:"+cararray[x].id+" - type "+cararray[x].type;
          else
            cart = cart + "car"+x+ "- id:"+cararray[x].id+" - type "+cararray[x].type+ "<br>";
        }
        document.getElementById('message').innerHTML = cart;
    }
    </script>
    <head>
    <body onload="myFun()">
    <div id="message"></div>
    </body>
    </html>

试试这个简单的解决方案。希望它会对你有用！

显示数组中的值

5 个答案: