Форум

Morris · #1 (**permalink**) 09.04.2020, 15: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>

Morris · #2 (**permalink**) 09.04.2020, 19:04

Задачу №2 решил, заменил кнопку Reset, на типа Test (подписал Сброс), со значением там где надо, form.Number.value=null

Morris · #3 (**permalink**) 09.04.2020, 21:02

Упростил вопрос
Радио кнопки должны вводить свое значение 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">

рони · #4 (**permalink**) 09.04.2020, 21:20

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>

laimas · #5 (**permalink**) 10.04.2020, 07:26

Сообщение от рони

document.querySelector("[name='Number']:checked").value;

Можно и так - form.elements['Number'].value

Morris · #6 (**permalink**) 10.04.2020, 11:23

рони,
Эффект достигнут, Радио кнопки выводят свое значение в текстовое поле. Но появились новая проблема. Теперь в текстовое поле не сохраняет данные, вносимые с клавиатуры, уходит снова на значение радио.

voraa · #7 (**permalink**) 10.04.2020, 11:33

<!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>

Morris · #8 (**permalink**) 10.04.2020, 12:26

Крутяк, теперь все работает. Всем спасибо за помощь!

Morris · #9 (**permalink**) 14.04.2020, 20:11

Решил заменить две радиокнопки на один флажком. Но что то пошло не так. При убирании галочки значения не возвращается на предустановленное в <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>

рони · #10 (**permalink**) 14.04.2020, 20:32

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>

Форум

Справочник

Discord чат

Курсы javascript