There is a choice of delivery type in <input type="radio"> with JS processing; The selected type is displayed like this: <output id="product-price"></output> , but for some reason, when it has not yet made a choice, clicking on an empty line of the order form, this message appears in place of this output [object HTMLParagraphElement] .

What is it and how to deal with it?

Here are the JS code snippets:

 window.onload = function(){ totalPrice = "<?=$_SESSION['total_price']?>"; } window.onclick = function onclickRadio() { var nameRadio = document.getElementsByName('nameRadio'); for (var i = 0; i < nameRadio.length; i++) { if (nameRadio[i].type === 'radio' && nameRadio[i].checked) { rezultatRadio = nameRadio[i].value; } } document.getElementById('rezultatRadio').innerHTML = rezultatRadio; document.getElementById('product-price').innerHTML = new Number (+rezultatRadio) + new Number (+totalPrice); } <input type="radio" name="nameRadio" value="300" > Наш курьер (Стоимость доставки 300 руб) <input type="radio" name="nameRadio" value="0">Самовывоз

Here is the html output where this warning appears:

 <td align="center"><p id="rezultatRadio"></p> руб </td>

If you output through, then the following warning appears: [object HTMLOutputElement]

Now I try this code, nothing happens at all ....:

 function(){ totalPrice = "<?=$_SESSION['total_price']?>"; } function showResult() { var nameRadio = document.getElementsByName('nameRadio'); for (var i = 0; i < nameRadio.length; i++) { if (nameRadio[i].type === 'radio' && nameRadio[i].checked) { rezultatRadio = nameRadio[i].getAttribute('data'); } } document.getElementById('rezultatRadio').innerHTML = rezultatRadio; document.getElementById('product-price').innerHTML = new Number (+rezultatRadio) + new Number (+totalPrice); } showResult(); window.onclick = showResult; <input type="radio" name="nameRadio" data='300' value="300" checked="checked"> Наш курьер (Стоимость доставки 300 руб) <input type="radio" name="nameRadio" data='0' value="0">Самовывоз
  • 3
    this means that instead of a string, you use an object of the type <p> somewhere. no more code can not be said. - zb '
  • Inserted code snippets into the body of the question. - arhat78
  • The last code works if you remove the line with the total-price output. Most likely the problem is still here, if you want to get a number from the string new Number() , not the best option, there is a unary plus, there is a parseInt and so on, use them better - ThisMan
  • ThisMan, read about parseInt, but I misunderstood something and newNumber seemed to be more accessible .... I will try. - arhat78
  • ThisMan, tried to do this: document.getElementById ('product-price'). InnerHTML = parseInt (rezultatRadio) + parseInt (totalPrice); In normal code, it converts a string to a number, but still nothing works with new codes ....... - arhat78

2 answers 2

1) The processing of a click is hung incorrectly.
2) The default toString() of the node node object is displayed: <p></p> (you need to insert a value, you can get it using innerHTML ).

More can not be said without a code.

  • Pasted the code into the body of the question. - arhat78

Your p element has id = 'rezultatRadio', by default browsers automatically create variables with id . That is, you initially have a variable rezultatRadio , which stores the element, with id = 'rezultatRadio'.
Therefore, the first time you click, the variable rezultatRadio is displayed (in this case, this is [object HTMLParagraphElement])
Solution options:

  1. Change the id of the item
  2. Change the name of the variable rezultatRadio
  3. Change the handler (more precisely, hang it on the input-s, and not on the whole window)
  4. Make one of the radio checked by default (the easiest way)

For the test, create an element with id, and try to print a variable with the same name as id

What would have had a value when downloading? Then this: demo2 We created a function that we immediately call + hang it by clicking on the checkbox

 function showResult () { var nameRadio = document.getElementsByName('radio1'); for (var i = 0; i < nameRadio.length; i++) { if (nameRadio[i].type === 'radio' && nameRadio[i].checked) { rezultatRadio = nameRadio[i].getAttribute('data'); } } document.getElementById('rezultatRadio').innerHTML = rezultatRadio; } showResult(); window.onclick = showResult;
  • 1-2: if I change the id or the name of the variable, how will the selected value be displayed? What to change the id? And what to change the name of the variable? 3. It is necessary to change windows.onclick to input.onclick (I have not seen such examples yet) 4. If I make one radio by default, then the output does not display the value until I click on any field in the form ... - arhat78
  • @ arhat78 Here's a demo , if you remove from radio checked, then [object HTMLDivElement] will be displayed, if you put it, everything will be okay - ThisMan
  • ThisMan, well, I tried checked, but for me, as on the demo, when I first load the page, it does not display the values ​​(I have 300 rubles by default, it’s radio 1 in the demo), it displays only after clicking on something. Is it possible to display the value immediately upon the first boot? - arhat78
  • ThisMan, everything is fine in demo2, as I would like, but I try to collect one of two codes (mine and your demo2) into one - nothing happens ...... And in the input there is data = "radio1..2 .. 3 "is what? - arhat78
  • I added a modified code to my first question, which also fails; nothing works at all .... - arhat78