It is difficult to make an interface that simulates the chat between two people.

problem description

now there are three problems:
first: I can"t send the profile picture along with what I said. I tried to put it directly into img.src but it didn"t work.
second: I can"t make the two simulated conversations clear, because what I sent is the innerHTML that changes the div, but the second sentence I send is also the innerHTML that changes the div, so I don"t know how to turn them into two.
third: how to get the words I send are displayed from top to bottom. I have tried to change their margins, but to no avail.

the environmental background of the problems and what methods you have tried

I asked several front-end groups, and I looked it up in the browser many times, but I couldn"t solve it.

related codes

/ / Please paste the code text below (do not replace the code with pictures) 

<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title></title>
<style>
-sharpphpone{
    width:330px;
    height:550px;
    border:5px solid -sharpFFD700;
    margin:80px auto 0;
    position:relative;
}
-sharpcase{
    width:330px;
    height:50px;
    border-top:2px solid -sharpccc;
    position:absolute;
    bottom:0;
    background:-sharpEBEBEB;
}
-sharpimg1{
    widht:50px;
    height:50px;
    position:absolute;
    left:0;
    bottom:0;    
}
-sharpimg2{
    widht:50px;
    height:50px;
    position:absolute;
    left:0;
    bottom:0;
    display:none;    
}    
-sharptext{
    position:absolute;
    right:110px;
    bottom:10px;
}
-sharpbut{
    width:80px;
    height:30px;
    position:absolute;
    right:10px;;
    bottom:7px;
    background:-sharp708090;
}
-sharpbox{
    padding:5px 0;
    background:-sharp7CFC00;
    font-size:20px;
    font-family:"";
    position:absolute;
    right:0;
    
}
-sharpbox2{
    widht:auto;
    background:-sharpccc;
    font-size:20px;
    font-family:"";
    margin:50px 50px 50px 0;
    position:absolute;
    left:0;
    padding:5px 0;
}
</style>
</head>
<body>
<div id="phpone">
<div id="box"></div><br/>
    <div id="box2"></div>
    <div id="case">
    <img id="img1" src="img/wou.svg"/>
    <img id="img2" src="img/man.svg"/>
    <input id="text" type="text"/>
    <input id="but" type="button" value=""/>
</div>
</div>
</body>
/*js*/
<script>
    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+"<br/>";
    oText.value="";
};
};
    oImg2.onclick=low;
    function low(){
    oImg2.style.display="none";
    oBut.onclick=function(){
    oBox.innerHTML +=":"+oText.value+"<br/>";
    oText.value="";
    
};
    
};
};
</script>
</html>

what result do you expect? What is the error message actually seen?

want to achieve the following effect:

:

I hope my friends can help me or provide me with an idea. I have no idea how to keep writing right now. Thank you!

Css html javascript chrome
Jul.08,2022 
<div>
    <img src="" />
    

</div>

send a sentence to insert the above structure above a paragraph. You can clone or create a new div

.

first of all, to understand how the module of the page should be divided, first of all, you can see that the avatar and text should form a module, because they are both combined, so they can be placed under the same block element. secondly, there should be a module above the avatar and text, with a fixed height, so that when the content exceeds the length, there is a scroll bar instead of overflow display. Finally, it is summarized as follows: 

   <div>  // 
           

               <img /> //
               <span></span> //
           

           

               <img /> //
               <span></span> //
           

           

               <img /> //
               <span></span> //
           

   </div>

as for top-to-bottom display, just insert the combined P tag all the way to the first of the box elements

after sorting out the html display, now take a look at the js logic. On the home page, you can see that there are two people talking. According to object-oriented programming, it can be understood as two objects
. Then let's see what the two objects have in common and different.
same
(1) all have avatars
(2) all can speak
different
(1) when speaking, the avatar text is displayed on the left, and an avatar text on the right is displayed

.

based on the above, we can build these two objects 

var xiaoMing = {
    img: 'xiaoMing.png',
    float: 'left',
    say: function(){}
}
var xiaoMei = {
    img: 'xiaoMei.png',
    float: 'right',
    say: function(){}
}

because most of the ways of speaking are the same, they can be extracted 

    function sayFun(text) {
        var p = document.createElement('p'),
            imgHTML = '<img src="' + this.img + '" style="float: ' + this.float + '"/>';
            textHTML = '<span style="float: ' + this.float + '">' + text+'</span>',
            clearHTML = '<div style="clear:both"></div>';
            box = document.getElementById('box2');
        p.innerHTML = imgHTML + textHTML + clearHTML;
        box.insertBefore(p, box.firstChild);
    }

when switching the avatar in the lower left corner, it is tantamount to specifying the person to speak next, that is, nextSayPersion = someone
when clicking to speak, it means that the person designated to speak is going to speak, that is, nextSayPersion.say ('I spoke')

organize all the code as follows: 

<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title></title>
<style>
p{
    padding: 0;
    margin:  0;
}
-sharpphpone{
    width:330px;
    height:550px;
    border:5px solid -sharpFFD700;
    margin:80px auto 0;
    position:relative;
}
-sharpcase{
    width:330px;
    height:50px;
    border-top:2px solid -sharpccc;
    position:absolute;
    bottom:0;
    background:-sharpEBEBEB;
}
-sharpimg1{
    width:50px;
    height:50px;
    position:absolute;
    background: red;
    left:0;
    bottom:0;    
}
-sharptext{
    position:absolute;
    right:110px;
    bottom:10px;
}
-sharpsay{
    width:80px;
    height:30px;
    position:absolute;
    right:10px;
    bottom:7px;
    background:-sharp708090;
}
-sharpbox{
    padding:5px 0;
    background:-sharp7CFC00;
    font-size:20px;
    font-family:"";
    position:absolute;
    right:0;
    
}
-sharpbox2{
    height: 480px;
    background: -sharpccc;
    font-size: 20px;
    font-family: "";
    padding: 5px 0;
}
</style>
</head>
<body>
    <div id="phpone">
        <div id="box"></div>
           <div id="box2"></div>
            <div id="case">
                <div id="choose">
                    <img id="img1" src="img/wou.svg"/>                
                </div>
                <input id="text" type="text"/>
                <input id="say" type="button" value=""/>
            </div>
    </div>
</body>
/*js*/
<script>
    window.onload = function () {
        function sayFun(text) {
            var p = document.createElement('p'),
                imgHTML = '<img src="' + this.img + '" style="float: ' + this.float + '"/>';
                textHTML = '<span style="float: ' + this.float + '">' + text+'</span>',
                clearHTML = '<div style="clear:both"></div>';  //  
                box = document.getElementById('box2');
            p.innerHTML = imgHTML + textHTML + clearHTML;
            box.insertBefore(p, box.firstChild);
        }        

        var xiaoMing = {
            img: 'xiaoMing.png',
            float: 'left',
            say: sayFun
        }
        var xiaoMei = {
            img: 'xiaoMei.png',
            float: 'right',
            say: sayFun
        }
        var nextSayPerson = false, //  
            chooseDom = document.getElementById('choose'),
            sayDom = document.getElementById('say');         

        //   
        choose.onclick = function () {
            nextSayPerson = nextSayPerson === xiaoMing ? xiaoMei : xiaoMing;
            document.getElementById('img1').src = nextSayPerson.img;
        }

        // 
        sayDom.onclick = function () {
            var textDom = document.getElementById('text'),
                text = textDom.value;
            nextSayPerson.say(text);
            // 
            textDom.value = '';
        }

        // 
        choose.onclick();


    }
</script>
</html>

Previous: The browser finds the location of all function declarations according to function keywords.

Next: How to convert the uppercase and lowercase c path of path in svg?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf6204-31faf.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf6204-31faf.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?