the function return the resultat null or undefined

Question

I have a problem I created a function to take the value of the input: check and to take its value to return this result to write in the h3

html

<input type="radio"  name="check"  value="2" /> Option 1

<input type="radio" name="check"  value="1"  /> Option 2`



 <h3 id="r" onchange="test1()"></h3>

 function test1 (){
  var select= document.querySelector('input[name="check"]:checked').value;
  return select
}

var selectbox = test1()
document.getElementById('r').innerHTML = selectbox

Why do you have a second set of parentheses here?: `test1()()` — David, Nov 28 '22 at 20:32
`
`? That doesn’t seem to make any sense. Inline event handlers like `onchange` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Also, `test1` doesn’t actually _do_ anything except return a value. `test1();` will just discard that value. — Sebastian Simon, Nov 28 '22 at 20:34
You need to learn about events. There is no change event on an h3 element. If you want the innerHTML to change when radio buttons are changed, your html innerHTML needs to be inside of the function you call and the events needs to be on the radio buttons. — epascarello, Nov 28 '22 at 20:34
@epascarello Well, a `change` event _could_ bubble, but it’s extremely unlikely that this is the intention here… — Sebastian Simon, Nov 28 '22 at 20:36
@mrzuser: Well if you already know it's a mistake then your first step would be to correct such mistakes in your code and re-test. Another thing noticeable in this code is that you're trying to find the selected value *immediately* when the page loads. You may want to look into things like button click events to perform an action after a user interaction. — David, Nov 28 '22 at 20:36
@mrzuser Familiarize yourself with the [DOM API](//developer.mozilla.org/en/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/en/docs/Web/Guide/Events). — Sebastian Simon, Nov 28 '22 at 20:37
@mrzuser: That's the point, there *is no* result of this function until some later event has occurred. When the page first loads, neither radio button is selected. So getting the selected radio button when the page first loads is meaningless. It looks like you may be *trying* to respond to an event, but an `
` element doesn't fire a `change` event. So what's the actual event you want to respond to? A `change` event on the `` elements? Something else? — David, Nov 28 '22 at 20:39

epascarello · Answer 1 · 2022-11-28T21:04:14.597

1

Add the event listeners to the radio button. Set the element's text when you read the input's value.

function test1() {
  var value = document.querySelector('input[name="check"]:checked').value;
  document.getElementById('r').textContent = value
}

<input type="radio" name="check" value="2" onchange="test1()" /> Option 1

<input type="radio" name="check" value="1" onchange="test1()" /> Option 2`

<h3 id="r"></h3>

And based on your comment, make a function

function getTheValue () {
  return document.querySelector('input[name="check"]:checked').value;
}

function test1() {
  document.getElementById('r').textContent = getTheValue();
}

<input type="radio" name="check" value="2" onchange="test1()" /> Option 1

<input type="radio" name="check" value="1" onchange="test1()" /> Option 2`

<h3 id="r"></h3>

edited Nov 28 '22 at 21:04

answered Nov 28 '22 at 20:40

epascarello

204,599
20
195
236

OK now that in the h3 the value is displayed is that I'm stuck here because I want the value of h3 for example 2 is adding it with another later in another div – mrzuser Nov 28 '22 at 20:59
So read the value when you need it. – epascarello Nov 28 '22 at 21:00
` Option 1 Option 2 and ` Option 1 Option 2` and is that I want to add the values of the radios that I have selected in a div – mrzuser Nov 28 '22 at 21:20
So just select all radio buttons and read their values. `document.querySelectorAll('[type="radio"]:checked')` and loop over them. – epascarello Nov 28 '22 at 22:02
`function test1() { let v1 = document.getElementById('r').textContent = getTheValue(); let v2 = document.getElementById('rd').textContent = getTheValue1(); var check = v1 + v2 console.log(check) }` when I want to add it does not want to add the values ex: a + b but it shows ab plz – mrzuser Nov 29 '22 at 13:31
You are concatenating strings. If you want to add numbers, convert them to numbers. – epascarello Nov 29 '22 at 15:19
`const total = document.querySelectorAll('[type="radio"]:checked').reduce(function(total, rb) { return total + Number(rb.value); }, 0);` – epascarello Nov 29 '22 at 15:21

the function return the resultat null or undefined

` element doesn't fire a `change` event. So what's the actual event you want to respond to? A `change` event on the `` elements? Something else?

1 Answers1