jquery новое сообщение продолжает предыдущее и текст уходит далеко за пределы страницы. Как исправить?

Рейтинг: 0Ответов: 1Опубликовано: 22.06.2023

Надо сделать дневник с помощью jquery. Вводится дата, заголовок и текст в поля ввода слева, нажимаем на кнопку - все содержимое появляется справа.

Пишем следующую заметку, нажимаем кнопку и новое сообщение должно появиться с новой строки. Примерно так:

https://i.sstatic.net/G4Rpq.png

Все написал, когда большой текст - все работает. Если текст короткий, то каждое новое сообщение продолжает предыдущее и текст уходит далеко за пределы страницы.

Подскажите, что делаю не так. Прошу сильно не пинать, это учебное задание и многие вещи пока не знаю. Заранее спасибо.

Здесь HTML:

  <body>
    
    <div class="container">
         <h1>Blogi harjoitus </h1>
         <h2>Blogi</h2>
            <div class="wrapper">                
                                
                <div class="input"> 
                
                    <div class="indate">
                        <input type="text" placeholder= "Data" value="" id="indate_input" >
                    </div>
                    
                    <div class="inotsikko">
                        <input type="text" placeholder= "Otsikko " value="" id="inotsikko_input" >
                    </div>
                    
                    <div class="intext">
                        <textarea cols="30" rows="10" placeholder= "Message"  value="" id="intext_input"></textarea>
                    </div>
                    
                    <div class="button">
                        <button class= "button_button">Lisaa</button>  
                    </div>                   
                                     
                </div>
                
                
                <div class="output">  
                
                
                    <div class="outdateheader">     
                        <p class="dateheader"> </p> 
                        
                    </div>
                   
                </div>
                
            </div>
                                              
    </div>
    <script src="js/scripts.js"></script>
        
</body>

Css:

body {
    font-family: Verdana;
    color: black;
    padding:0px 0px 0px 100px;
}

 .wrapper {
     display: flex;
     justify-content: space-between;
    border: 1px solid blue;
    background-color:yellow;
    flex-wrap: nowrap;
    width: 80%;   
}
.input {
    border: 1px  blue;
    flex-basis: 33%;
}
.output {     
   display:flex;
    flex-direction:column;
   max-width: 70%;
   border: 3px solid blue;
    flex-basis: 66%; 
}

.indate {
    padding:10px;   
}
.inotsikko {
    padding:10px ;  
}
.intext {
    padding:20px 10px;  
}
.button {
    padding: 20px 0px;
   text-align: center;  
}
.button_button {    
    background-color: red;   
}
.outdateheader {
     max-width:80% ;            
}
 p.dateheader {
     max-width:80% ;     
}
 .text {
   width: 80%;

и jquery:

$(document).ready(function(){
      $("button").click(function(){
          
          var txt1 = document.getElementById("inotsikko_input").value;
          var txt2 = document.getElementById("indate_input").value;
          var txt3 = document.getElementById("intext_input").value;  
          var txt = txt1+txt+txt3;
        
        $("p.dateheader").append(txt);
        
      });
       
   });
css javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Добавил переносы строк <br/> в скрипт и переносы слов word-break: break-word; в стиль элемента p dateheader

$(document).ready(function(){
    $("button").click(function(){
        var txt1 = document.getElementById("inotsikko_input").value;
        var txt2 = document.getElementById("indate_input").value;
        var txt3 = document.getElementById("intext_input").value;
        var txt = txt1+' '+txt2+'<br/>'+txt3+'<br/><br/>';
        $("p.dateheader").append(txt);
    });
});
body {
    font-family: Verdana;
    color: black;
    padding: 0px 0px 0px 100px;
}
.wrapper {
    display: flex;
    justify-content: space-between;
    border: 1px solid blue;
    background-color: yellow;
    flex-wrap: nowrap;
    width: 80%;
}
.input {
    border: 1px  blue;
    flex-basis: 33%;
}
.output {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    border: 3px solid blue;
    flex-basis: 66%;
}
.indate {
    padding: 10px;
}
.inotsikko {
    padding:10px;
}
.intext {
    padding:20px 10px;
}
.button {
    padding: 20px 0px;
    text-align: center;
}
.button_button {
    background-color: red;
}
.outdateheader {
    max-width: 100%;
}
p.dateheader {
    max-width: 90%;
    margin-left: 30px;
    word-break: break-word;
}
.text {
    width: 80%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <h1>Blogi harjoitus</h1>
    <h2>Blogi</h2>
    <div class="wrapper">
        <div class="input">
            <div class="indate">
                <input type="text" placeholder= "Data" value="" id="indate_input">
            </div>
            <div class="inotsikko">
                <input type="text" placeholder= "Otsikko " value="" id="inotsikko_input">
            </div>
            <div class="intext">
                <textarea cols="30" rows="10" placeholder= "Message"  value="" id="intext_input"></textarea>
            </div>
            <div class="button">
                <button class= "button_button">Lisaa</button>
            </div>
        </div>
        <div class="output">
            <div class="outdateheader">
                <p class="dateheader"></p>
            </div>
        </div>
    </div>
</div>