Ndtyjky

I can get all radio buttons in the if statement and can manipulate them. However in the else block it throws "TypeError: Cannot set property 'checked' of undefined"

I have a form for two purposes. Add and edit. When I use the form for edit it fils the values from the state. I find the right radio button to check and check it. This part works fine. when I use the form for adding new data I update components' state by change events. Sometimes the last checked radio button stays checked and if I don't toggle it I can not get radio buttons data. Else part of the code is to clear all radio buttons checks. But it throws "TypeError: Cannot set property 'checked' of undefined" I do not know if it is because of React.
what is wrong with this code?

if (formControl.buttonText === "Düzenle") {

    let correctAnswer = question.correctAnswer;

    let radioButtons = document.getElementsByName("cevap");

    for (let i = 0; i < 4; i++) {

      if (radioButtons[i].value === correctAnswer)

        radioButtons[i].checked = true;

    }

} 



else {

    let radioButtons = document.getElementsByName("cevap"); //it throws error here

    for (let i = 0; i < 4; i++) {

      radioButtons[i].checked = false;

    }

}

Here is the complete code:

import React from "react";



const AddQuestion = ({

  formControl,

  question,

  handleView,

  handleChange,

  handleSubmit,

  handleQuestionDelete

}) => {

  //checks the radio button according to selected question for edit.

  if (formControl.buttonText === "Düzenle") {

    let correctAnswer = question.correctAnswer;

    let radioButtons = document.getElementsByName("cevap");

    for (let i = 0; i < 4; i++) {

      radioButtons[i].checked = radioButtons[i].value === correctAnswer;

    }

  } else {//unchecks the radio buttons for addinh new data.

    let radioButtons = document.getElementsByName("cevap");

    for (let i = 0; i < 4; i++) {

      radioButtons[i].checked = false;

    }

  }



  return (

    <div className="container">

      <button className={formControl.addQuestionButton} onClick={handleView}>

        Soru Ekle

      </button>

      <div className={formControl.visible}>

        <form>

          <div className="form-group">

            <label htmlFor="Textarea1">Konu Seçiniz.</label>

            <select

              className="form-control"

              id="topic"

              onChange={handleChange}

              value={question.topic}

            >

              <option value="">Seçiniz</option>

              <option value="tarih">Tarih</option>

              <option value="matematik">Matematik</option>

              <option value="cografya">Coğrafya</option>

            </select>

          </div>

          <div className="form-group inline-form">

            <label htmlFor="puan">Soru Puanı Giriniz.</label>

            <input

              type="number"

              step="5"

              id="point"

              className="form-control"

              placeholder="Puan"

              value={question.point}

              onChange={handleChange}

            />

          </div>

          <div className="form-group">

            <label htmlFor="Textarea1">Soruyu Giriniz.</label>

            <textarea

              className="form-control"

              id="questionText"

              rows="2"

              placeholder="Soruyu giriniz."

              value={question.questionText}

              onChange={handleChange}

            />

          </div>

          <label className="form-control">Seçenekleri Giriniz.</label>

          <div className="form-group inline-form">

            <div className="inline-form">

              <input

                type="text"

                id="answer1"

                className="form-control"

                placeholder="Seçenek 1"

                value={question.answer1}

                onChange={handleChange}

              />

            </div>

            <div className="inline-form">

              <label className="form-check-label" htmlFor="cevap">

                Doğru mu?

              </label>

              <input

                className="form-check-input"

                type="radio"

                name="cevap"

                id="correctAnswer"

                value="answer1"

                onChange={handleChange}

              />

            </div>

          </div>



          <div className="form-group inline-form">

            <div className="inline-form">

              <input

                type="text"

                id="answer2"

                className="form-control"

                placeholder="Seçenek 2"

                value={question.answer2}

                onChange={handleChange}

              />

            </div>

            <div className="inline-form">

              <label className="form-check-label" htmlFor="cevap">

                Doğru mu?

              </label>

              <input

                className="form-check-input"

                type="radio"

                name="cevap"

                id="correctAnswer"

                value="answer2"

                onChange={handleChange}

              />

            </div>

          </div>



          <div className="form-group inline-form">

            <div className="inline-form">

              <input

                type="text"

                id="answer3"

                className="form-control"

                placeholder="Seçenek 3"

                value={question.answer3}

                onChange={handleChange}

              />

            </div>

            <div className="inline-form">

              <label className="form-check-label" htmlFor="cevap">

                Doğru mu?

              </label>

              <input

                className="form-check-input"

                type="radio"

                name="cevap"

                id="correctAnswer"

                value="answer3"

                onChange={handleChange}

              />

            </div>

          </div>



          <div className="form-group inline-form">

            <div className="inline-form">

              <input

                type="text"

                id="answer4"

                className="form-control"

                placeholder="Seçenek 4"

                value={question.answer4}

                onChange={handleChange}

              />

            </div>

            <div className="inline-form">

              <label className="form-check-label" htmlFor="cevap">

                Doğru mu?

              </label>

              <input

                className="form-check-input"

                type="radio"

                name="cevap"

                id="correctAnswer"

                value="answer4"

                onChange={handleChange}

              />

            </div>

          </div>

        </form>

        <div className="inline-form">

          <button className="button" onClick={handleSubmit}>

            {formControl.buttonText}

          </button>

          <button

            className={formControl.deleteButton}

            onClick={() => {

              handleQuestionDelete(question.id);

            }}

          >

            Sil

          </button>

        </div>

      </div>

    </div>

  );

};



export default AddQuestion;

The "radioButtons" is empty for some reason. When you get elements by name it does not return items. If you posted the HTML the reason was going to be guessable.

Anyway, You can check that radioButtons is not empty if you want.

let radioButtons = document.getElementsByName("cevap");

if(radioButtons.length>0){

  for (let i = 0; i < radioButtons.length; i++) {

    radioButtons[i].checked = false;

  }

}

If you do that check it will stop throwing the error. But keep in mind that it will not set checked to false either. Not until you know why the getElementsByName returned empty data from your HTML and solve that problem.

You can simplify the logic a bit here and simply assign the checked state based on the result of a comparison between the value and the correct answer. This could be done in a single statement - but I am using a ternary equation to demonstrate the outcomes of each state.

As stated in the comments - it is preferable to dynamically check the length of the array so that you can add or remove items from the array and the code will still work.

if (formControl.buttonText === "Düzenle") {

    let correctAnswer = question.correctAnswer;

    let radioButtons = document.getElementsByName("cevap");

    for (let i = 0; i < radioButtons.length; i++) {

      radioButtons[i].value === correctAnswer

        ? radioButtons[i].checked = true

        : radioButtons[i].checked = false;

    }

}

I changed the code as below. I used radioButtons.length as suggested and it worked. I do not know the reason but it worked.

const radioButtons = document.getElementsByName("cevap");

  if (formControl.buttonText === "Gönder") {

    for (let i = 0; i < radioButtons.length; i++) {

      radioButtons[i].checked = false;

    }

  } else  {

    let correctAnswer = question.correctAnswer;

    for (let i = 0; i < radioButtons.length; i++) {

      radioButtons[i].checked = radioButtons[i].value === correctAnswer;

    }

}