Вставить текст из input в текст
Доброго времени суток, хотел для удобства работы написать не большую веб форму для настройки оборудования. Суть в чем ввести данные в 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 вставляется только в одном(в первом) месте. В остальных местах не проставляется. Как можно решить данную проблему? |
Логично работает. На странице не может быть два одинаковый идентификатора, т.к атрибут id подразумевает уникальный элемент.
|
И как же быть в данном случае?
|
Следуя логике кода, задать уникальный id второму и третьему элементу b. При клике вызывать три отдельных обработчика события, т.е три функции для каждого элемента. Либо переписать код используя классы. Но для тебя будет быстрее дописать свой код.
|
Если вам не затруднит не могли привезти пример?
|
Переменная в регулярном выражении
<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,
завез:) |
Ну и еще вопрос, можно ли сделать так что бы эти данные динамически менялись? т.е не используя кнопок? и если да то какую "функцию" стоит применить?
|
| Часовой пояс GMT +3, время: 10:21. |