Вставить текст из input в текст

[bulatka]

Доброго времени суток, хотел для удобства работы написать не большую веб форму для настройки оборудования. Суть в чем ввести данные в input и подставить их там, где мне нужно. По гуглив сделал для такое решение:

<script type="text/javascript">
function changeText0(){
 var userInput = document.getElementById('userInput0').value;
 document.getElementById('boldStuff0').innerHTML = userInput;
}
</script>
<script type="text/javascript">
function changeText1(){
 var userInput = document.getElementById('userInput1').value;
 document.getElementById('boldStuff1').innerHTML = userInput;
}
</script>
<script type="text/javascript">
function changeText2(){
 var userInput = document.getElementById('userInput2').value;
 document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<script type="text/javascript">
function changeText3(){
 var userInput = document.getElementById('userInput3').value;
 document.getElementById('boldStuff3').innerHTML = userInput;
}
</script>

<input type='text' id='userInput0' value='VLAN'/>
<input type='button' onclick='changeText0()' value='Change Text'/>

<input type='text' id='userInput1' value='IP ADDRESS' />
<input type='button' onclick='changeText1()' value='Change Text'/>

<input type='text' id='userInput2' value='SYSTEN LOC' />
<input type='button' onclick='changeText2()' value='Change Text'/>

<input type='text' id='userInput3' value='GATEWAY' />
<input type='button' onclick='changeText3()' value='Change Text'/>


<p>
create vlan <b id='boldStuff0'></b> tag <b id='boldStuff0'></b></br>
config vlan <b id='boldStuff0'></b> add tagged 25-28</br>
config snmp system_name <b id='boldStuff1'></b></br>
config snmp system_loc <b id='boldStuff2'></b></br>
create iproute default <b id='boldStuff3'></b></br>
</p>

Проблема в том что значение с id boldStuff0 вставляется только в одном(в первом) месте. В остальных местах не проставляется. Как можно решить данную проблему?

[Rasy]

Логично работает. На странице не может быть два одинаковый идентификатора, т.к атрибут id подразумевает уникальный элемент.

[bulatka]

И как же быть в данном случае?

[Rasy]

Следуя логике кода, задать уникальный id второму и третьему элементу b. При клике вызывать три отдельных обработчика события, т.е три функции для каждого элемента. Либо переписать код используя классы. Но для тебя будет быстрее дописать свой код.

[bulatka]

Если вам не затруднит не могли привезти пример?

[Rasy]

<input type='text' value='VLAN'/>
<input type='button' class="btn" id="user_input0" value='Change Text'/>

<input type='text' value='IP ADDRESS' />
<input type='button' class="btn"  id="user_input1"  value='Change Text'/>

<input type='text' value='SYSTEN LOC' />
<input type='button' class="btn"  id="user_input2" value='Change Text'/>

<input type='text' value='GATEWAY' />
<input type='button' class="btn"  id="user_input3" value='Change Text'/>
<p>
create vlan <b class="bold-stuff-0"></b> tag <b class="bold-stuff-0"></b><br>
config vlan <b class="bold-stuff-0"></b> add tagged 25-28<br>
config snmp system_name <b class="bold-stuff-1"></b><br>
config snmp system_loc <b class="bold-stuff-2"></b><br>
create iproute default <b class="bold-stuff-3"></b><br>
</p>

<script>
var buttons = document.querySelectorAll('.btn');
var b = document.querySelectorAll('b[class*=bold]');
buttons = Array.prototype.slice.call(buttons);
b = Array.prototype.slice.call(b);

buttons.forEach(function(el, i) {
  el.addEventListener('click', function(e) {
    var input = this.previousElementSibling;
    var re = new RegExp(i);

    b.forEach(function(el, i) {
      if (re.test(el.className)) {
        el.textContent = input.value;
      }
    });
 	  
  });
});
</script>

[bulatka]

Спасибо, вы мне тут уже готовое решение написали.

[Rasy]

bulatka,
завез

[bulatka]

Ну и еще вопрос, можно ли сделать так что бы эти данные динамически менялись? т.е не используя кнопок? и если да то какую "функцию" стоит применить?