Как передать значение из html в js

Вопрос-ответ JavaScript
1

Как значение (input radio) со страницы html передать в скрипт js и дальше там использовать, присвоив переменной. Код HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
<FORM>
<input type="radio" name="nameRadio" value="1"/>желтый
<input type="radio" name="nameRadio" value="2"/>белый
<input type="radio" name="nameRadio" value="3"/>голубой
<input type="radio" name="nameRadio" value="4"/>красный

<input type="button" name="bt" value="Подтвердить" onclick ="onclickRadio()" >
</FORM>
<script src="script.js"></script>
    <script>
        function onclickRadio() {
          var nameRadio = document.getElementsByName('nameRadio');
            var rezultatRadio = undefined;
                  for (var i = 0; i < nameRadio.length; i++) {
                        if (nameRadio[i].type === 'radio' && nameRadio[i].checked) {
                            rezultatRadio = nameRadio[i].value;                     
                        }
                  }   
                  if(rezultatRadio === undefined){
            }
                  return f(rezultatRadio);
        }               
    </script>
    </body>
</html>

Код скрипта:

function f(data) {
    if (data === undefined) {
        n = 0;
        alert('Выберите цвет');
    } else {
        n = data;
    }
    return n;
}
var way = f(data);
alert(way);

Переменная way не выводится. В консоли пишет, что не data определена.

2

Так должно работать? https://jsfiddle.net/LenaR/03gz7fk8/10/

здесь var rezultatRadio = undefined; - тут не надо присваивать undefined
а эта часть кода function f(data) { … - что должна делать? предупреждение, когда ни один radiobutton не выбран?

3

Задача состоит не в том, чтобы вывести на страницу сообщение и значение rezultatRadio. Задача - использовать значение rezultatRadio в скрипте function f(data) { … , присвоив его значение новой переменной в скрипте и дальше с ней работать. Если убрать rezultatRadio = undefined; будет не корректно работать. Нужно четкое значение rezultatRadio = undefined, если ничего не выбрано пользователем (и только в этом случае выводить сообщение на экран, что ничего не выбрано).

4

можно и не алертом выводить это значение, а вставить например где-то в boby страницы (если надо - могу пример привести). Алертом сделала потому что в примере в коде уже был алерт. Не совсем понятно что этот пример должен делать и куда именно передавать значение.
Ошибка у вас в коде не здесь document.getElementsByName(‘nameRadio’), а именно в логике построения вашего кода

5

МНЕ НЕ НУЖНО ВЫВОДИТЬ ЗНАЧЕНИЕ! И ошибки нет. Код работает. Мне нужно в скрипте (после функции f) присвоить переменной way значение rezultatRadio, выбранное пользователем и дальше в скрипте (!), а не на странице, производить последующие действия с переменной way. А сейчас переменная way не принимает никакого значения.

6

Так заработает https://jsfiddle.net/ht1wq47o/2/. Лучше проверку на наличие данных делать ближе к месту где получаешь данные (т.е. в onclickRadio). Давай обсудим что прояснить если нужно.

7

Спасибо, но… Ты описал f(data) и вызвал ее изнутри onclikRadio(), подставив в качестве параметра resultatRadio. Но это не передает значение resultatRadio за пределы onclikRadio().
Мне нужно например так (добавь после твоего скрипта):
var way = rezultatRadio;//???
if (way == 1){
var res = 8;
alert (res);
}
if (way == 2){
var res = 13;
alert (res);
}
Как передать переменной way значение rezultatRadio?

8

Возможно ты хочешь сделать глобальную переменную. Тогда просто выноси значение на глобальный уровень так:

function onclickRadio() {
	var nameRadio = document.getElementsByName('nameRadio');
	var rezultatRadio;
	for (var i = 0; i < nameRadio.length; i++) {
		if (nameRadio[i].type === 'radio' && nameRadio[i].checked) {
			rezultatRadio = nameRadio[i].value;
		}
	}
  if (rezultatRadio) {
    window.rezultatRadio = rezultatRadio
  } else {
  	alert('Выберите цвет');
  }
}

Но тогда другому коду будет очень тяжело работать с этим значением потому что сложно определить когда появится значение в window.rezultatRadio. Просто поставить этот код после кода обработчика события не получится потому что код выполнится сразу же, и в момент выполнения значение window.rezultatRadio будет undefined.

Скорее всего тебе не нужна глобальная переменная в этом коде (она не нужна в 95% сучаев).

Скорее всего тебе нужно выполнить код подобный

if (way == 1) {
	var res = 8;
	alert(res);
}
if (way == 2) {
	var res = 13;
	alert(res);
}

в момент когда есть значение из html-я. Для этого просто оберни код функцией и вызови с известными данными:

function p(way) {
	if (way == 1) {
		var res = 8;
		alert(res);
	}
	if (way == 2) {
		var res = 13;
		alert(res);
	}
}

function onclickRadio() {
	var nameRadio = document.getElementsByName('nameRadio');
	var rezultatRadio;
	for (var i = 0; i < nameRadio.length; i++) {
		if (nameRadio[i].type === 'radio' && nameRadio[i].checked) {
			rezultatRadio = nameRadio[i].value;
		}
	}
  if (rezultatRadio) {
    p(rezultatRadio);
  } else {
  	alert('Выберите цвет');
  }
}
9

Очень сложно понять какую логику работы вы заложили.
Если вы хотите сразу отслеживать выбранное значение в радиокнопках, то следует повесить события onclick на каждый input, а не на кнопку “Подтвердить” и в этом обработчике передавать выбранное значение в глобальную переменную way.
Вот пример: https://jsfiddle.net/pzwoL0n6/4/

10

Спасибо всем за ответы. Что касается глобальной переменной, то результата не получается. Пробовал. Проблема в том, что результат переменной rezultatRadio мне нужно передать в скрипт three js. А это сложный большой скрипт и обернуть его в функцию тоже не выходит.

11

Я предположу что ты параметризируешь график который строишь в d3. Покажи код для конечной цели.