JavaScript вывод содержимого нескольких полей

каждому пробелу задайте уникальный ID - в данном случае, например, используйте span в нужных местах

<span id="span_1"></span>

<span id="span_2"></span>

<span id="span_3"></span>

У инпутов свои ID

<input type="text" id="input_1" value="la-la-1">

<input type="text" id="input_2" value="la-la-2">

<input type="text" id="input_3" value="la-la-3">

По нажатию кнопки - вызов функции, в которой значение соответствующего инпута записываете в нужное место

var span1 = document.getElementById("span_1");

span1.innerHtml = document.getElementById('input_1').value

Если используете jQuery

$('#span_1').html( $('#input_1').val() );

Примеры функций

function fnc1()
{
    //Это весьма грубо, но, думаю, наглядно
    var span1 = document.getElementById("span_1");
    span1.innerHtml = document.getElementById('input_1').value;

    var span2 = document.getElementById("span_2");
    span2.innerHtml = document.getElementById('input_2').value;

    var span3 = document.getElementById("span_3");
    span3.innerHtml = document.getElementById('input_3').value;
}

или с jQuery

function fnc2()
{
    $('#span_1').html( $('#input_1').val() );
    $('#span_2').html( $('#input_2').val() );
    $('#span_3').html( $('#input_3').val() );
}

Можно всё упростить и "элегантизировать".

Возможно, ошибки в синтаксисе, но яваскрипт - не моя фишка. Комрады, чуть-что, поправят.

Спасибо за ответ и оперативность!

То есть, если я все правильно понял, будет что то вроде того ... (Поправьте если что то не так)

<input type="text" id="input_1" > 

<input type="text" id="input_2" > 

<input type="text" id="input_3" >



<script type="text/javascript">

function fnc1()

{

    var span1 = document.getElementById("span_1");

    span1.innerHtml = document.getElementById('input_1').value;



    var span2 = document.getElementById("span_2");

    span2.innerHtml = document.getElementById('input_2').value;



    var span3 = document.getElementById("span_3");

    span3.innerHtml = document.getElementById('input_3').value;

}

</script>



<span id="span_1"></span>

<span id="span_2"></span>

<span id="span_3"></span>

И прошу подсказать - Каким образом мне вызвать данную функцию?

Пробовал, вот так:

<input onclick="fnc1()" type="button" value="Вывести">

но, кажется я что то не так делаю или понямаю 🙄

Спасибо и заранее благодарен за ответ!

$('#button').on('click', function() {

    $('#span_1').html( $('#input_1').val() );

    $('#span_2').html( $('#input_2').val() );

    $('#span_3').html( $('#input_3').val() );

});

Не забудьте про кнопку

<button id="button">Кнопка</button>

<input onclick="fnc1()" type="button" value="Вывести">

В принципе, всё правильно, просто замените innerHtml на innerText. innerHtml не срабатывает (яваскриптчики, наверное, знают почему. А я только догадываюсь).

<input type="text" id="input_1" > 
<input type="text" id="input_2" > 
<input type="text" id="input_3" >

<script type="text/javascript">
function fnc1()
{
    var span1 = document.getElementById("span_1");
    span1.innerText = document.getElementById('input_1').value;

    var span2 = document.getElementById("span_2");
    span2.innerText = document.getElementById('input_2').value;

    var span3 = document.getElementById("span_3");
    span3.innerText = document.getElementById('input_3').value;
}
</script>

<span id="span_1"></span>
<span id="span_2"></span>
<span id="span_3"></span>
<input onclick="fnc1();" type="button" value="Вывести">

Проверил в Хроме и Опере, - в таком виде работает. А jquery не используете? Если нет, то рекомендую разобраться с ним. Для таких задач он Вас здорово выручит.

Проблема решена. Большое, просто огромнейшее спасибо за ответы!

Отдельное спасибо "Swir"!