Как получить фактическое значение метки / текст переключателя, созданного DOM?

Question

Как получить фактическое значение метки / текст переключателя, созданного DOM?

0

в основном я пытаюсь получить окно предупреждения с фактической меткой (выбранную либо Edit, либо Delete), используя getElementById..., созданный dom, но если я раскомментирую коды после alert(a) и удаляю alert(a) он даже не создает кнопки для меня.. любая идея, как это можно сделать или что я сделал не так?

<HTML>  
<HEAD>  
<TITLE> New Document </TITLE>  
<SCRIPT LANGUAGE="JavaScript">
function createRadio(){  
var objDiv = document.getElementById("radioDiv");  

    var radioItem1 = document.createElement("input");  
    radioItem1.type = "radio";  
    radioItem1.name = "radioGrp";  
    radioItem1.id = "rad1";  
    radioItem1.value = "myradio1";  

//        radioItem1.defaultChecked = true;   
//        radioItem1.checked = true;  

    var radioItem2 = document.createElement("input");  
    radioItem2.type = "radio";  
    radioItem2.name = "radioGrp";  
    radioItem2.id = "rad2";  
    radioItem2.value = "myradio2";  
//        var pA= prompt("Type name for 1");
//        var pB= prompt("Type name for 2");
    var objTextNode1 = document.createTextNode("Edit");  
    var objTextNode2 = document.createTextNode("Delete");  

    var objLabel = document.createElement("label");  
    objLabel.htmlFor = radioItem1.id;  
    objLabel.appendChild(radioItem1);  
    objLabel.appendChild(objTextNode1);  

    var objLabel2 = document.createElement("label");  
    objLabel2.htmlFor = radioItem2.id;  
    objLabel2.appendChild(radioItem2);  
    objLabel2.appendChild(objTextNode2);  


    objDiv.appendChild(objLabel);  
    objDiv.appendChild(objLabel2);  

}   

function test()
{
//    var a = document.getElementById("radioDiv").firstChild;


var a = document.getElementById("radioDiv").firstChild;
alert(a);
//    if (a=="Edit")
//    {
//        alert("Edit");
//    }
//    else if (a=="Delete")
//    {
//        alert("Delete");
//    }
//    else()
//    {
//        alert("Try Again");
//    }
}

</SCRIPT>  
</HEAD>  

<BODY>  

<BUTTON onclick="createRadio()">Create Radio Buttons</BUTTON>
<BUTTON onclick="test()">Alert</BUTTON>
<div id="radioDiv"></div>  
</BODY>  
</HTML>

rupps 26 март 2014, в 01:22

Источник

Теги:

javascript

jquery

html

dom

1 ответ

Ещё вопросы

rupps · Accepted Answer · 2014-03-25T22-43-00.000Z

(EDIT) Хорошо, взгляните на это! И попытайтесь определить будущие проблемы с помощью этой техники: общие, короткие функции и комментарии. Удачи!

<html>
    <head>
        <script>
        /**
           * Create a group of radiobuttons
           * @param whereToAttach Div to attach generated things
           * @param groupname Name for the group
           * @param options Array of options ["one","two",...
           */

          function createRadioGroup(whereToAttach, groupname, options) {

              var objDiv = document.getElementById(whereToAttach);
              objDiv.innerHTML=""; // we clear it just in case
              for (var i = 0, len = options.length; i < len; i++) {
                  objDiv.appendChild(createRadioButtonWithLabel(name, options[i], options[i]));
              }
          }

          /**
           * Get a group selected node
           * @param groupname Name of the group
           * @return The radiobutton element that is checked, or null if none
           */

          function getSelectedNode(groupname) {
              var nodes = document.getElementById("radioDiv").childNodes;
              for (var i = 0; i < nodes.length; i++) {
                  // nodes[i] is each label child of radioDiv
                  // we want its button to check if pressed
                  var radiobutton=nodes[i].firstChild;
                  if (radiobutton.checked) return radiobutton;
              }
              return null; // none selected
          }


          /**
           * Creates a label with a radiobutton and a text node
           * @param name Name of the group this radiobutton belongs to
           * @param label Label for the radiobutton
           * @param value Value for the radiobutton
           */

          function createRadioButtonWithLabel(groupname, label, value) {

              var objTextNode = document.createTextNode(label),
                  objLabel = document.createElement("label"),
                  objRadioButton = createRadioButton(groupname, value);

              objLabel.appendChild(objRadioButton);
              objLabel.appendChild(objTextNode);

              return objLabel;
          }

          /**
           * Creates a radio button
           * @param groupname Name of the group this radiobutton belongs to
           * @param value Value for the radiobutton
           */

          function createRadioButton(groupname, value) {
              var radioItem = document.createElement("input");
              radioItem.type = "radio";
              radioItem.name = groupname;
              radioItem.value = value;
              return radioItem;
          }

          //////////////////////////////////////////////////////////////////////

          function createStuff() {
              createRadioGroup("radioDiv", "coolMenu", ["Edit", "Delete", "Modify", "Modify a lot", "Have a beer", "Walk the dog", "f** my girlfriend"]);
          }

          function testStuff() {
              var nodeSelected = getSelectedNode("coolMenu");
              alert(nodeSelected.value);
          }

        </SCRIPT>  
    </HEAD>  
    <BODY>  
        <BUTTON onclick="createStuff()">Create Radio Buttons</BUTTON>
        <BUTTON onclick="testStuff()">Alert</BUTTON>
        <div id="radioDiv"></div>
    </BODY>  
</HTML>

------ OLDER MSG

у вас есть глупая опечатка и небольшая проблема. Это работает:

        function test()
        {
            var b = document.getElementById("radioDiv").firstChild;

            // b is the LABEL OBJECT, its text is b.innerText

            var a=b.innerText
            alert(a);


            if (a=="Edit")
            {
                alert("Edit");
            }
            else if (a=="Delete")
            {
                alert("Delete");
            }
// THIS IS THE TYPO >>>   else()
            else 
            {
                alert("Try Again");
            }
        }

однако этот код не даст вам выбранный ярлык, но первый ярлык (вы запрашиваете firstChild)

Если вы хотите узнать, какое радио выбрано, используя структуру, которую вы строите динамически (что, кстати, довольно сложно), вы можете определить эту удобную функцию:

function isRadioButtonPressed(number) {
   return document.getElementById("rad"+number).checked;
}

потому что вы назвали ваши радиообъекты rad1, rad2 ,...

так что вы можете сделать:

var isEditSelected=isRadioButtonPressed(1); // will return true if edit is selected
var isDeleteSelected=isRadioButtonPressed(2);  // will return true if delete is selected

Некоторые советы:

Вы должны создать функции утилиты, такие как isRadioButtonPressed, чтобы избежать многократного повторения длинных выражений с помощью firstchild, document.getElementById и т.д., Как вы видите, код может стать очень сложным для написания простых вещей.
Вы должны использовать средства разработки FireBug или Chrome/Safari. Если вы используете хром, перейдите в меню "TOOLS" и выберите "инструменты разработчика". Появится окно и там вы увидите ошибки вашего кода. Если вы сделаете это с оригинальным вопросом, вы увидите, как Chrome жалуется на синтаксическую ошибку в строке else(). Если вы используете FireFox, загрузите плагин Firebug, то же самое. Это необходимо для разработки веб-страниц.

Дополнительные функции:

 function createRadioButton(id, name, value) {
      var radioItem = document.createElement("input");  
      radioItem.type = "radio";  
      radioItem.name = name;
      radioItem.id = id;  
      radioItem.value = value; 
      return radioItem;
 }

Посмотрите, как круто ваше созданиеRadio сейчас:

 function createRadio() {

      var radioItem1=createRadioButton("rad1","radioGrp", "myradio1"),
          radioItem2=createRadioButton("rad2","radioGrp", "myradio2");

       .
       .
 }

Разве это не намного легче читать?

Надеюсь, поможет :)

о вау ... ты мастер !! Кажется, вы поняли идею, что я пытался сделать за один раз! ... Не могли бы вы дать мне реструктурированный код, объединяющий все ваши предложения? Я новичок и изо всех сил пытаюсь реструктурировать мой код так, как вы предлагаете ... большое спасибо еще раз
:) ты действительно гений !!! очень понравился последний вариант в переключателе: P