Показывать текст из поля ввода в разных местах на странице html - PullRequest
Новая
       8

Показывать текст из поля ввода в разных местах на странице html

0 голосов
/ 04 августа 2020

Чего я хочу добиться, так это ввести текст в поле ввода и при отправке я бы хотел, чтобы текст отображался в разных местах страницы HTML.

Пример: у меня есть страница со следующими строками

redcar-
greencar-
yellowcar-

После того, как я введу ТЕКСТ в поле ввода, я хочу, чтобы строки изменились на

redcar-TEXT
greencar-TEXT
yellowcar-TEXT

Возможно ли это достичь? Если у вас есть образец кода, он будет очень кстати.

У меня работает 

function myFunction()
{
var x;


var person=prompt("Please enter your text","text");

if (person!=null)
  {
  x="redcar-" + person + "";
    document.getElementById("demo").innerHTML=x;
  }
}
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>

Но я не могу заставить его работать для нескольких строк

Ответы [ 4 ]

1 голос
/ 04 августа 2020

Вы можете сделать это так и просто добавить все «машины», которые хотите, в массив cars 

function myFunction() {
  const person = prompt("Please enter your text","text");
  const cars = ['redcar-', 'yellowcar-'];

  if (person != null) {
    document.getElementById("demo").innerHTML = cars.map(c => c + person).join('<br>');
  }
}
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>
1 голос
/ 04 августа 2020

Вам нужно только создать больше <p> и изменить их содержимое.

Я использовал textContent вместо innerHTML, потому что считается плохой практикой используйте innerHTML с вводом пользователя 

function myFunction()
{
    const person = prompt("Please enter your text", "text");

    if (person !== null)
    {
        document.getElementById("demo").textContent = "redcar-" + person;
        document.getElementById("demo2").textContent = "greencar-" + person;
        document.getElementById("demo3").textContent = "yellowcar-" + person;
    }
}
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>

Если вы предпочитаете всегда записывать часть stati c, вы можете использовать внутренний тег в своих <p> s, я использую <span> здесь, поскольку они обычно используются для этого.

также я удалил идентификаторы в пользу класса, позволяющего мне l oop над элементом 

function myFunction()
{
    const person = document.getElementById("input").value;

    if (person !== null)
    {
        Array.from(document.getElementsByClassName("output")).forEach(el => {
            el.textContent = person
        })
    }
}
<input id="input"><button onclick="myFunction()">Try it</button>

<p>redcar-<span class="output"></span></p>
<p>greencar-<span class="output"></span></p>
<p>yellowcar-<span class="output"></span></p>
0 голосов
/ 04 августа 2020

Вы можете использовать jquery, чтобы текст отображался в элементе p в HTML. Как вы сказали, вы хотите ввести текст, а затем при отправке вы хотите, чтобы он отображался в элементе ap. Итак, вот что вы можете сделать. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <form id="carForm">
        RedCar: 
        <input type="text" id="redCar">
        GreenCar: 
        <input type="text" id="greenCar">
        YellowCar:
        <input type="text" id="yellowCar">
        <input type="submit" value="submit" id="submitBtn">

        <br><br>
        <p id="redCarP"></p>
        <p id="greenCarP"></p>
        <p id="yellowCarP"></p>
    </form>

    <script>
        const form = document.querySelector('#carForm');
        form.addEventListener('submit', function (e) {
            e.preventDefault();
        })
        $('#submitBtn').click(function() {
            $('#redCarP').text($('#redCar').val());
            $('#greenCarP').text($('#greenCar').val());
            $('#yellowCarP').text($('#yellowCar').val());
        })
    </script>
</body>
</html>
0 голосов
/ 04 августа 2020

Вы также можете использовать Jquery и добавить html к классу или идентификатору. Для получения дополнительной информации: Jquery Документ 

$( "p" ).append( "<strong>Hello</strong>" );
p {
  background: yellow;
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<p>I would like to say: </p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...