设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › console.log()里的内容看得见,inenrHTML打印出来都成了[ ...
返回列表 发新帖
查看: 5371|回复: 8

[已解决]console.log()里的内容看得见,inenrHTML打印出来都成了[Object,Object]

[复制链接]
华丽转身123
发表于 2018-5-5 09:38:05 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 华丽转身123 于 2018-5-5 10:41 编辑

console.log()里的内容
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{学号: 2, 总成绩: 287}
1
:
{学号: 1, 总成绩: 285}
2
:
{学号: 4, 总成绩: 268}
3
:
{学号: 5, 总成绩: 274.5}
4
:
{学号: 6, 总成绩: 265}
5
:
{学号: 7, 总成绩: 284}
6
:
{学号: 8, 总成绩: 248}
7
:
{学号: 3, 总成绩: 230}
8
:
{学号: 10, 总成绩: 258}
9
:
{学号: 9, 总成绩: 185}
length
:
10
__proto__
:
Array(0)

innerHTML打印出来都成
[object Object]

[object Object]

[object Object]

[object Object]

[object Object]

[object Object]

[object Object]

[object Object]

[object Object

**********************************************
我要怎样才能把console.log的内容正常输出呢
最佳答案
月排行榜 / 总排行榜
不二如是
2018-5-5 11:21:57
华丽转身123 发表于 2018-5-5 10:55


修改：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>学生成绩</title>
  6.     <style type="text/css">
  7.         div {
  8.             width: 200px;
  9.             width: 500px;
  10.             float: left;
  11.         }

  13.     </style>

  15. </head>
  16. <body>
  17. <div id="output">学员的总成绩是:</div>
  18. <div id="ssput">学员的总成绩排名是:</div>
  19. <script>
  20.     var out = document.getElementById("output");
  21.     var oss = document.getElementById("ssput");
  22.     var stu1 = [];
  23.     var ss = [];
  24.     var tt = null;
  25.     var stu = [{学号: 1, 语文: 105, 数学: 62, 英语: 118},
  26.         {学号: 2, 语文: 89, 数学: 78, 英语: 120},
  27.         {学号: 3, 语文: 86, 数学: 64, 英语: 80},
  28.         {学号: 4, 语文: 78, 数学: 99, 英语: 91},
  29.         {学号: 5, 语文: 107.5, 数学: 97, 英语: 70},
  30.         {学号: 6, 语文: 112, 数学: 61, 英语: 92},
  31.         {学号: 7, 语文: 101, 数学: 79, 英语: 104},
  32.         {学号: 8, 语文: 71, 数学: 72, 英语: 105},
  33.         {学号: 9, 语文: 56, 数学: 68, 英语: 61},
  34.         {学号: 10, 语文: 98, 数学: 83, 英语: 77}];

  36.     //    成绩求和
  37.     stu.map(function (item) {
  38.         stu1.push('{' + '学号:' + item.学号 + ',' + '总成绩:' + eval(item.语文 + item.数学 + item.英语) + '}');
  39.     });

  41.     //    左边"学好：x，总成绩：x"的创建
  42.     function strToJson(str) {
  43.         var json = eval('(' + str + ')');
  44.         return json;
  45.     }

  47.     //console.log(typeof(ss[i]));
  48.     for (var i = 0; i < ss.length - 1; i++) {

  50. //                                console.log(typeof(status[i]))
  51.         if (ss[i].总成绩 < ss[i + 1].总成绩) {
  52.             tt = ss[i];
  53.             ss[i] = ss[i + 1];
  54.             ss[i + 1] = tt;
  55. //
  56.         };
  57.     };

  59.     //    遍历将学号和总成绩录入到ss数组
  60.     for (var i = 0; i < stu1.length; i++) {
  61.         ss.push(strToJson(stu1[i]));
  62.     }


  65.     //    输出stu1中的对象，左边所示
  66.     for (var i = 0; i < stu1.length; i++) {
  67.         out.innerHTML += '<br>' + stu1[i] + '<br>';

  69.     }


  72.     //    ss此时为一个对象，无法直接输出，要转换为string
  73.     //利用原生的JSON.stringify()
  74.     for (var i = 0; i < ss.length; i++) {
  75.         oss.innerHTML += '<br>' + JSON.stringify(ss[i]) + '<br>';
  76.     }

  78. </script>
  79. </body>
  80. </html>
复制代码

Snip20180505_41.png


问题：
object对象无法直接输出到页面，需要进行处理。


stu1有处理，而ss没有：
Snip20180505_39.png
Snip20180505_40.png


找到问题，答案就是怎么将object转换为string——》原生：JSON.stringify()

QQ截图20180505093233.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2018-5-5 10:21:20 | 显示全部楼层
这个是对象，inenrHTML无法直接输出阿。

看一下你的标签代码，用最简单的DOM或者jqery都可以。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

elang696
发表于 2018-5-5 10:25:16 | 显示全部楼层
不二如是 发表于 2018-5-5 10:21
这个是对象，inenrHTML无法直接输出阿。

看一下你的标签代码，用最简单的DOM或者jqery都可以。

装作没看到拼写错误
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

华丽转身123
 楼主| 发表于 2018-5-5 10:41:49 | 显示全部楼层
elang696 发表于 2018-5-5 10:25
装作没看到拼写错误

谢谢提醒我改回来了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

华丽转身123
 楼主| 发表于 2018-5-5 10:44:56 | 显示全部楼层
本帖最后由 华丽转身123 于 2018-5-5 10:53 编辑
不二如是 发表于 2018-5-5 10:21
这个是对象，inenrHTML无法直接输出阿。

看一下你的标签代码，用最简单的DOM或者jqery都可以。


DOM我用的是div标签换成p标签也不行,都不行啊jquery我还不熟练不会用
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2018-5-5 10:53:11 | 显示全部楼层
华丽转身123 发表于 2018-5-5 10:44
DOM我用的是div标签换成p标签也不行,都不行啊jqery我还不熟练不会用

把你的全部代码，发上来～
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

华丽转身123
 楼主| 发表于 2018-5-5 10:55:53 | 显示全部楼层
本帖最后由 华丽转身123 于 2018-5-5 10:57 编辑
不二如是 发表于 2018-5-5 10:53
把你的全部代码，发上来～

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>学生成绩</title>
  6.                 <style type="text/css">
  7.                         div{
  8.                                 width: 200px;
  9.                                 width: 500px;
  10.                                 float: left;
  11.                         }
  12.                
  13.                 </style>
  14.                
  15.         </head>
  16.         <body>
  17.                 <div id="output">学员的总成绩是:</div>
  18.                 <div id="ssput">学员的总成绩排名是:</div>
  19.                 <script>
  20.                 var out=document.getElementById("output");
  21.                 var oss=document.getElementById("ssput");
  22.                 var stu1 =[];
  23.                 var ss=[];
  24.                 var tt=null;
  25.                                 var stu=[{学号:1,语文:105,数学:62,英语:118},
  26.                                                  {学号:2,语文:89,数学:78,英语:120},
  27.                                                  {学号:3,语文:86,数学:64,英语:80},
  28.                                                  {学号:4,语文:78,数学:99,英语:91},
  29.                                                  {学号:5,语文:107.5,数学:97,英语:70},
  30.                                                  {学号:6,语文:112,数学:61,英语:92},
  31.                                                 {学号:7,语文:101,数学:79,英语:104},
  32.                                                 {学号:8,语文:71,数学:72,英语:105},
  33.                                                 {学号:9,语文:56,数学:68,英语:61},
  34.                                                 {学号:10,语文:98,数学:83,英语:77}]
  35.                         stu.map(function(item){
  36.                                
  37.                                  stu1.push('{'+'学号:'+item.学号+','+'总成绩:'+eval(item.语文+item.数学+item.英语)+'}');
  38.                         });
  39.                         function strToJson(str){   
  40.                                 var json = eval('(' + str + ')');   
  41.                                 return json;   
  42.                                 }   
  43.                         for(var i=0;i<stu1.length;i++){
  44.                                 ss.push(strToJson(stu1[i]));
  45.                                         };
  46. //                                console.log(typeof(ss[i]));
  47.                         for(var i=0;i<ss.length-1;i++){
  48.                        
  49. //                                console.log(typeof(status[i]))
  50.                                 if(ss[i].总成绩<ss[i+1].总成绩){
  51.                                         tt = ss[i];
  52.                                         ss[i]=ss[i+1];
  53.                                         ss[i+1]=tt;
  54. //                               
  55.                                 };
  56.                         };
  57.                                 for(var i=0;i<stu1.length;i++){
  58.                                         out.innerHTML+='<br>'+stu1[i]+'<br>';
  59.                                        
  60.                                 };
  61.                                 console.log(ss);
  62.                                 for(var i=0;i<ss.length;i++){
  63.                                         oss.innerHTML+='<br>'+ss[i]+'<br>';
  64.                                 };
  65.                
  66.                 </script>
  67.         </body>
  68. </html>
复制代码

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2018-5-5 11:21:57 | 显示全部楼层    本楼为最佳答案   
华丽转身123 发表于 2018-5-5 10:55


修改：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>学生成绩</title>
  6.     <style type="text/css">
  7.         div {
  8.             width: 200px;
  9.             width: 500px;
  10.             float: left;
  11.         }

  13.     </style>

  15. </head>
  16. <body>
  17. <div id="output">学员的总成绩是:</div>
  18. <div id="ssput">学员的总成绩排名是:</div>
  19. <script>
  20.     var out = document.getElementById("output");
  21.     var oss = document.getElementById("ssput");
  22.     var stu1 = [];
  23.     var ss = [];
  24.     var tt = null;
  25.     var stu = [{学号: 1, 语文: 105, 数学: 62, 英语: 118},
  26.         {学号: 2, 语文: 89, 数学: 78, 英语: 120},
  27.         {学号: 3, 语文: 86, 数学: 64, 英语: 80},
  28.         {学号: 4, 语文: 78, 数学: 99, 英语: 91},
  29.         {学号: 5, 语文: 107.5, 数学: 97, 英语: 70},
  30.         {学号: 6, 语文: 112, 数学: 61, 英语: 92},
  31.         {学号: 7, 语文: 101, 数学: 79, 英语: 104},
  32.         {学号: 8, 语文: 71, 数学: 72, 英语: 105},
  33.         {学号: 9, 语文: 56, 数学: 68, 英语: 61},
  34.         {学号: 10, 语文: 98, 数学: 83, 英语: 77}];

  36.     //    成绩求和
  37.     stu.map(function (item) {
  38.         stu1.push('{' + '学号:' + item.学号 + ',' + '总成绩:' + eval(item.语文 + item.数学 + item.英语) + '}');
  39.     });

  41.     //    左边"学好：x，总成绩：x"的创建
  42.     function strToJson(str) {
  43.         var json = eval('(' + str + ')');
  44.         return json;
  45.     }

  47.     //console.log(typeof(ss[i]));
  48.     for (var i = 0; i < ss.length - 1; i++) {

  50. //                                console.log(typeof(status[i]))
  51.         if (ss[i].总成绩 < ss[i + 1].总成绩) {
  52.             tt = ss[i];
  53.             ss[i] = ss[i + 1];
  54.             ss[i + 1] = tt;
  55. //
  56.         };
  57.     };

  59.     //    遍历将学号和总成绩录入到ss数组
  60.     for (var i = 0; i < stu1.length; i++) {
  61.         ss.push(strToJson(stu1[i]));
  62.     }


  65.     //    输出stu1中的对象，左边所示
  66.     for (var i = 0; i < stu1.length; i++) {
  67.         out.innerHTML += '<br>' + stu1[i] + '<br>';

  69.     }


  72.     //    ss此时为一个对象，无法直接输出，要转换为string
  73.     //利用原生的JSON.stringify()
  74.     for (var i = 0; i < ss.length; i++) {
  75.         oss.innerHTML += '<br>' + JSON.stringify(ss[i]) + '<br>';
  76.     }

  78. </script>
  79. </body>
  80. </html>
复制代码

Snip20180505_41.png


问题：
object对象无法直接输出到页面，需要进行处理。


stu1有处理，而ss没有：
Snip20180505_39.png
Snip20180505_40.png


找到问题，答案就是怎么将object转换为string——》原生：JSON.stringify()

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

华丽转身123
 楼主| 发表于 2018-5-5 11:41:01 | 显示全部楼层
本帖最后由 华丽转身123 于 2018-5-5 12:10 编辑
不二如是 发表于 2018-5-5 11:21
修改：


看到不二老师做了那么多注释,我很羞愧啊,以后是不是写代码都要写注释才算是一个合格的程序员啊?
还有个问题:
    for (var i = 0; i < ss.length - 1; i++) {

//                                console.log(typeof(status))
        if (ss.总成绩 < ss[i + 1].总成绩) {
            tt = ss;
            ss = ss[i + 1];
            ss[i + 1] = tt;
//
        };
    };

    //    遍历将学号和总成绩录入到ss数组
    for (var i = 0; i < stu1.length; i++) {
        ss.push(strToJson(stu1));
    }
************************
这代码将 //    遍历将学号和总成绩录入到ss数组 写在下面,程序不是自上而下的吗,运行到  for (var i = 0; i < ss.length - 1; i++) 时,ss还是一个空的数组,为什么没出错?
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 09:37

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表