问题描述

现在有三个问题：

第一：我无法让头像图片跟随说的话一起发送出去，我试过直接放入img.src但是并不行。

第二：我没有办法做到让两个模拟的对话一人一句分的清清楚楚，因为我这个发送出去的 是改变这个div的innerHTML 但是我发第二句的话同样也是改变div的innerHTML 他们两个本来就应该是一个 所以我搞不清要怎么变成两个 。

第三：怎么让我发送的字是从上到下显示，我试过改变他们的外边距，但是并没有什么效果。

问题出现的环境背景及自己尝试过哪些方法

我询问了多个前端群，自己也在浏览器查了多次，但都没能解决。

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

模拟手机聊天

#phpone{

width:330px;

height:550px;

border:5px solid #FFD700;

margin:80px auto 0;

position:relative;

}

#case{

width:330px;

height:50px;

border-top:2px solid #ccc;

position:absolute;

bottom:0;

background:#EBEBEB;

}

#img1{

widht:50px;

height:50px;

position:absolute;

left:0;

bottom:0;

}

#img2{

widht:50px;

height:50px;

position:absolute;

left:0;

bottom:0;

display:none;

}

#text{

position:absolute;

right:110px;

bottom:10px;

}

#but{

width:80px;

height:30px;

position:absolute;

right:10px;;

bottom:7px;

background:#708090;

}

#box{

padding:5px 0;

background:#7CFC00;

font-size:20px;

font-family:"宋体";

position:absolute;

right:0;

}

#box2{

widht:auto;

background:#ccc;

font-size:20px;

font-family:"宋体";

margin:50px 50px 50px 0;

position:absolute;

left:0;

padding:5px 0;

}

/*下面是js代码*/

window.onload=function(){

var oImg1=document.getElementById('img1');

var oImg2=document.getElementById('img2');

var oText=document.getElementById('text');

var oBut=document.getElementById('but');

var oPhpone=document.getElementById('phpone');

var oBox=document.getElementById('box');

var oBox2=document.getElementById('box2');

low();

oImg1.onclick=show;

function show(){

oImg2.style.display='block';

oBut.onclick=function(){

oBox2.innerHTML +='说:'+oText.value+'
';

oText.value='';

};

};

oImg2.onclick=low;

function low(){

oImg2.style.display='none';

oBut.onclick=function(){

oBox.innerHTML +='说:'+oText.value+'
';

oText.value='';

};

};

};

你期待的结果是什么？实际看到的错误信息又是什么？

希望完成的如下的效果：

目前是这样：

希望各位伙伴可以帮助我，或给我提供一个思路。我现在完全想不明白要怎么继续写。谢谢！