Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2020, 15:32
Аспирант
Отправить личное сообщение для Morris Посмотреть профиль Найти все сообщения от Morris
 
Регистрация: 09.04.2020
Сообщений: 32

Ввод значение с Радио кнопки.
Добрый день.Вопросик такого плана.
Имеется интерфейс калькулятора с Радио кнопками. Имеется кнопка Сброса.
Задача №1, Радио кнопки должны вводить свое значение Value в соответствующее окно ввода (Напряжение, В).
Задача №2, при Сбросе, Радио кнопки не должны переключатся по умолчанию, и сохранять свое значение в окне ввода.
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Макет</title>
  </head><body><center><p>Макет</p> </center>
<script>
function primer() { 
form.Number1.value=50
form.Number2.value=400
form.Number3.value=1
}</script>

<script type="text/javascript">
        function calculat (obj) {
        var num1= obj.Number1.value.replace(/,/,".");
        var num2= obj.Number2.value.replace(/,/,".");
		var v = num2/ num1; 
		var result1 = v; obj.res1.value=result1;
}</script>
<center><form name="form" style="width:300px">
<table class="my_table"><tbody><tr><td colspan="2">
</td></tr><tr align="left"><td align="left">
      Сопротивление, Ом</td><td>     <input type="text" value="" style="width:50px" maxlenght="5" name="Number1">
</td></tr><tr align="left"><td align="left">
      Напряжение, B <input type="radio" value="220" checked name="N">1ф
		       <input type="radio" value="380" name="N">3ф
</td>
<td><input type="text"  style="width:50px" maxlenght="5" name="Number2"></td>
</tr>
<tr align="left"><td align="left">Резистор № 
<input type="text" value="" style="width:17px" maxlenght="5" name="Number3"> 
</td>
<td><input type="button" style="width:50px" name="WB" value="Enter" onclick="calculat(form)"></td>
</tr>
<tr id="my_color" align="left"><td align="left">Ток, А</td>
<td> <input type="text1" style="width:50px" id="res1"></td></tr>
<tr id="my_color" align="left"><td align="left">
<input type="button" style="width:50px" value="Test" name="B1" onclick="primer()"></td>
 <td> <input type="button" style="width:50px" onclick="reset(form)" value="Reset"></td>
 </tr>
</tbody></table></form></center>
</body></html>
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2020, 19:04
Аспирант
Отправить личное сообщение для Morris Посмотреть профиль Найти все сообщения от Morris
 
Регистрация: 09.04.2020
Сообщений: 32

Задачу №2 решил, заменил кнопку Reset, на типа Test (подписал Сброс), со значением там где надо, form.Number.value=null
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2020, 21:02
Аспирант
Отправить личное сообщение для Morris Посмотреть профиль Найти все сообщения от Morris
 
Регистрация: 09.04.2020
Сообщений: 32

Упростил вопрос
Радио кнопки должны вводить свое значение value в окно ввода input type="text". Как сделать?

<input name="Number" type="radio" value="5" checked>1
<input name="Number" type="radio" value="10" >2
<input type="text" name="Number">

Последний раз редактировалось Morris, 09.04.2020 в 21:14.
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2020, 21:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Morris,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
function setNum()
{
var num = document.querySelector("[name='Number']:checked").value;
document.querySelector("[name='out']").value = num;
}
document.querySelector("form").addEventListener("change", setNum)
 });
  </script>
</head>
<body>
<form action="http://">
<input name="Number" type="radio" value="5" checked>1
<input name="Number" type="radio" value="10" >2
<input type="text" name="out" value="5">
</form>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2020, 07:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от рони
document.querySelector("[name='Number']:checked").value;
Можно и так - form.elements['Number'].value
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2020, 11:23
Аспирант
Отправить личное сообщение для Morris Посмотреть профиль Найти все сообщения от Morris
 
Регистрация: 09.04.2020
Сообщений: 32

рони,
Эффект достигнут, Радио кнопки выводят свое значение в текстовое поле. Но появились новая проблема. Теперь в текстовое поле не сохраняет данные, вносимые с клавиатуры, уходит снова на значение радио.
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2020, 11:33
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,746

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
function setNum()
{
var num = document.querySelector("[name='Number']:checked").value;
document.querySelector("[name='out']").value = num;
}
document.querySelectorAll("[name=Number]").forEach( inp => inp.addEventListener("change", setNum) )
 });
  </script>
</head>
<body>
<form action="http://">
<input name="Number" type="radio" value="5" checked>1
<input name="Number" type="radio" value="10" >2
<input type="text" name="out" value="5">
</form>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 10.04.2020, 12:26
Аспирант
Отправить личное сообщение для Morris Посмотреть профиль Найти все сообщения от Morris
 
Регистрация: 09.04.2020
Сообщений: 32

Крутяк, теперь все работает. Всем спасибо за помощь!
Ответить с цитированием
  #9 (permalink)  
Старый 14.04.2020, 20:11
Аспирант
Отправить личное сообщение для Morris Посмотреть профиль Найти все сообщения от Morris
 
Регистрация: 09.04.2020
Сообщений: 32

Решил заменить две радиокнопки на один флажком. Но что то пошло не так. При убирании галочки значения не возвращается на предустановленное в <input type="text" name="out" value="5">
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
function setNum()
{
var num = document.querySelector("[name='Number']:checked").value;
document.querySelector("[name='out']").value = num;
}
document.querySelectorAll("[name=Number]").forEach( inp => inp.addEventListener("change", setNum) )
 });
  </script>
</head>
<body>
<form action="http://">
<input type="checkbox" value="10" name="Number" >1
<input type="text" name="out" value="5">
</form>
</body>
</html>

Последний раз редактировалось Morris, 14.04.2020 в 20:20.
Ответить с цитированием
  #10 (permalink)  
Старый 14.04.2020, 20:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Morris,
может учебник, ссылка вверху.
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script>
document.addEventListener( "DOMContentLoaded" , function() {
function setNum()
{
var checked = document.querySelector("[name='Number']:checked");
document.querySelector("[name='out']").value = checked ? 10 : 5;
}
document.querySelectorAll("[name=Number]").forEach( inp => inp.addEventListener("change", setNum) )
 });
    </script>
</head>
<body>
<form action="http://">
<label><input type="checkbox" value="10" name="Number" >10</label>
<input type="text" name="out" value="5">
</form>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить условия в калькулятор? Александр141 Events/DOM/Window 1 28.04.2019 10:20
изменение стиля кнопки с сохранение параметра после перезагрузки страницы AlexMonsterbit Элементы интерфейса 0 15.03.2019 18:11
Ввод в input с кнопки Artur_Hopf Общие вопросы Javascript 4 24.07.2018 13:13
Передать значение контейнера переменной golgo AJAX и COMET 4 02.06.2017 16:26
Как отправить значение нажатой radio кнопки? Anrew Общие вопросы Javascript 4 24.05.2015 23:31