Изменение, удаление значения в value js примеры
Сегодня будем менять значение в value в любом типе тега, в основном это input! Для того, чтобы изменить данные value , нужно каким-то образом обратиться к тегу! Далее добавим кнопку и изменим данные по клику по кнопке!
- Как изменить данные внутри value по id в javascript
- Как изменить данные внутри value по классу в javascript
- Как изменить данные внутри value по Name
- Как удалить данные внутри value в javascript
- Скачать скрипт изменения, удаления данные внутри value в javascript
- При повторном клике значение value возвращалось к первоначальному.
- Скачать можно здесь
Как изменить данные внутри value в javascript
Как мы уже выше сказали, то каким-то образом нам нужно обратиться в нашему инпуту! Добавим ему id = exampleДалее нам потребуется кнопка, прямо на неё повесим onclick по нажатию на которую изменим value в input
Готовый скрипт для изменения value в input:
<input id="example" value="Данные value которые будем менять по клику">
<button onclick="example.value='Здесь новые данные для value input'">Измени value по клику</button>
Как изменить данные внутри value по классу в javascript
Чем замечательно - использование getElementsByClassName - тем, что мы можем обратить с нескольким элементам, блокам которые имеют данный класс! Возьмем выше приведенный код изменения value и уже поставим во внутрь класс example, меняем лишь ячейку [0] на +1, в зависимости от количество input:
<input value="Данные value которые будем менять по клику " class="example" >
<button onclick="document.getElementsByClassName('example')[0].value='Здесь новые данные для value input!'" class="button">Измени value по клику</button>
Результат: ниже приведено несколько полей input, и каждой прикреплена своя кнопка:
Как изменить данные внутри value по Name
Но если вдруг у вашего инпута нет ни класса. ни id, ну или просто хотим обратиться к атрибуту name, есть такая функция, с помощью которой мы можем обратиться к атрибуту name -> getElementsByName, данная функция, как и выше приведенная получает HTMLCollection
Возьмем выше идущий скрипт, и заменим класс на name,getElementsByClassName на getElementsByName и получим:
<input name="example" value="Данные value которые будем менять с помощью getElementsByName">
<button onclick="document.getElementsByName('example')[0].value='getElementsByName = Здесь новые данные для value input !'" class="button">Измени value по клику</button>
Результат:
Как удалить данные внутри value в javascript
Если вас интересует, как удалить значение внутри input, то вам нужно выбрать како-то из выше перечисленных способов выше и вместо значения внутри скобок установить значение - ничего, например :Скачать скрипт изменения, удаления данные внутри value в javascript
Скрипт обновлен и внесены все выше приведенные скрипты замены value, скачать можно по ниже идущей ссылке:
При повторном клике значение value возвращалось к первоначальному.
Интересный вопрос был задан : "а как сделать чтобы при повторном клике значение value возвращалось к первоначальному?".
Для реализации данного вопроса в жизнь есть множество вариантов, предлагаю свой - для этого вам понадобится:
Поле ввода с value и кнопка:
<button id="id_button" class="button">Измени value по клику</button>
Используем один из способов onclick.
При первом клике помещаем значение из "value" в переменную "vvalue", в этот же момент помещаем новое значение в value.
При повторном клике возвращаем значение из переменной "vvalue" в поле "value" и обнуляем счетчик "cclick"
Html:
<input id="return_value" value="Данные value которые будем менять по клику">
<button id="id_button" class="button">Измени value по клику</button>
javascript
<script>
cclick='0' ;
var vvalue ;
id_button.onclick = function(){
cclick = Number(cclick) + 1;
if(cclick==1)
{
vvalue = return_value . value;
return_value . value = 'Новое значение';
}
if(cclick==2)
{
return_value . value = vvalue ;
cclick='0' ;
}
}
</script>
