Member 14580014 Ответов: 1

Как добавить разрыв в строке (a <br> или /n), но все еще изучая это

Я создаю форму, которая при вводе каждого поля и нажатии кнопки Отправить предоставляет вам весь текст на странице. Однако весь текст продолжается в одной строке при отправке, я пытаюсь отправить пробел между каждым текстовым значением (text1, text2..ex) для каждого поля, которое вы вводите, я пытаюсь поместить их в отдельные строки.

Я действительно Новичок во всем этом, и если бы вы могли мне помочь, я был бы вам очень признателен.

Спасибо :)

Что я уже пробовал:

<!DOCTYPE html>
<html>
<head>
    <script>
        function testVariable() {
            var strText = document.getElementById("textone").value;          
            var strText1 = document.getElementById("textTWO").value;
 var result = strText + ' ' + strText1;
            document.getElementById('spanResult').textContent = result;
             
        }
    </script>
</head>
<body> 
    <input type="text" id="textone" value="• Name/ Title :" />
<br>
    <input type="text" id="textTWO" value="• Phone #: " />
<br><br>
    <button  onclick="testVariable()">Submit</button> <br />
    <span id="spanResult">

    </span>
   
     
</body>
</html>

1 Ответов

Рейтинг:
11

Richard Deeming

Чтобы добавить разрыв строки в текстовое содержимое, вам необходимо использовать '\n':

var result = strText + '\n' + strText1;

Однако большинство HTML-элементов игнорируют разрывы строк и другие пробелы в своем содержимом.

Вы можете использовать либо один <pre> элемент[^]:
<pre id="spanResult"></pre>
Демонстрация[^]

или вы можете установить то white-space свойство CSS[^] к pre-line:
<style>
#spanResult {
    white-space: pre-line;
}
</style>
Демонстрация[^]

Полный пример:
<!DOCTYPE html>
<html>
<head>
    <script>
        function testVariable() {
            var strText = document.getElementById("textone").value;          
            var strText1 = document.getElementById("textTWO").value;
            var result = strText + '\n' + strText1;
            document.getElementById('spanResult').textContent = result;
        }
    </script>
    <style>
        #spanResult {
            white-space: pre-line;
        }
    </style>
</head>
<body> 
    <input type="text" id="textone" value="• Name/ Title :" />
    <br>
    <input type="text" id="textTWO" value="• Phone #: " />
    <br><br>
    <button  onclick="testVariable()">Submit</button> <br />
    <span id="spanResult"></span>
</body>
</html>

Member 14580014

Прекрасно, спасибо!