Javascript to create radio buttons

Question

Hi,I am trying to create a number of Yes / No radio buttons using javascript based on external data reference. My code is below, For some reason I just cannot get the Radio Buttons to display, It seems to be something to do with stylesheets. How do it Fix this? Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/ var dynamicChoices = "${e://Field/ExternalDataReference}"; var optionsArray = dynamicChoices.split(';'); var questionId = this.questionId; var questionContainer = this.getQuestionContainer(); // Find the multiple choice options container var optionsContainer = this.questionContainer.querySelector('.ChoiceStructure'); // Clear existing options optionsContainer.innerHTML = '';// Dynamically create and append new options for (var i = 0; i < optionsArray.length; i++) { // Create a container for the option var option = document.createElement('div'); option.className = 'Choice'; // Create a label for the device name var deviceNameLabel = document.createElement('label'); deviceNameLabel.innerHTML = "Name:" + optionsArray[i] + ""; option.appendChild(deviceNameLabel); // Add a line break option.appendChild(document.createElement('br')); // Add radio buttons (Yes and No) var radioGroupName = "radioGroup" + i; // "No" radio button var noRadioLabel = document.createElement("label"); noRadioLabel.textContent = "No"; var noRadioButton = document.createElement("input"); noRadioButton.type = "radio"; noRadioButton.name = radioGroupName; noRadioButton.value = "No"; noRadioLabel.insertBefore(noRadioButton, noRadioLabel.firstChild); // Append "No" radio button and label option.appendChild(noRadioLabel); // Add a line break between radio buttons option.appendChild(document.createElement("br")); // "Yes" radio button var yesRadioLabel = document.createElement("label"); yesRadioLabel.textContent = "Yes"; var yesRadioButton = document.createElement("input"); yesRadioButton.type = "radio"; yesRadioButton.name = radioGroupName; yesRadioButton.value = "Yes"; yesRadioLabel.insertBefore(yesRadioButton, yesRadioLabel.firstChild); // Append "Yes" radio button and label option.appendChild(yesRadioLabel); // Append the radio container to the option option.appendChild(radioContainer); // Append the entire option to the options container optionsContainer.appendChild(option);} });

EdenHaha · Answer

Well it is depend on your situations, I think it can be one of these cases:1.Radio buttons not displayingCause: The .ChoiceStructure element may not exist or is hidden.Fix: Check using DevTools and try changing the selector.2.radioContainer is not definedCause: There is an extra line of code: option.appendChild(radioContainer);.Fix: Remove this line.3.CSS may be hiding the radio buttonsCause: Some surveys use CSS to hide radio buttons.Fix: Add display: block !important; to make them visibleOr I think you can take a photos about your case, some part of your question are not really clear: like “external data reference”

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded