JavaScript appendChild () не работает? (впервые с appendChild ()) - PullRequest
Новая
       11

JavaScript appendChild () не работает? (впервые с appendChild ())

1 голос
/ 08 февраля 2012

Я пытаюсь построить небольшое резюме.Я хочу, чтобы пользователь мог вводить любое количество телефонных номеров.Однако appendChild () не работает должным образом.На самом деле, это не работает вообще.Это ничего не делает.Есть идеи?

HTML: 

<div id="phoneNumbers">
    <?php 
    if(isset($_SESSION['phoneNumber'])){
        for($i = 0; $i<sizeof($_SESSION['phoneNumber']); $i++){
            echo "<input type=\"text\" size=\"20\" name = \"phoneNumber[".$i."]\" 
                    value=\"".$_SESSION['phoneNumber'][$i]."\" />
                  <br />"; 
        }

    }
    else{
    ?>

    <input type="text" size="20" name = "phoneNumber[0]" 
        value="" />
    <br /> 

    <?php   
    }
    ?>

</div>


<input type="button" value="Add another phone number" onclick="addPhoneNumber()">

Javascript: 

var numberOfPhoneInputs = 1;

function addPhoneNumber()
{

// Found out the following doesn't work as expected...
//  var newPhoneNumberInput =  "<input type=\"text\" size=\"20\" name = \"phoneNumber[" + 
//      numberOfPhoneInputs +"]\" value=\"\" />" +
//    "<br />" 
//  document.getElementById("phoneNumbers").innerHTML += newPhoneNumberInput;


    var div = document.getElementByID("phoneNumbers");

    var newPhoneNumberInput = document.createElement('input');
    newPhoneNumberInput.setAttribute('type', 'text');
    newPhoneNumberInput.setAttribute('name', 'phoneNumber['+numberOfPhoneInputs+']');
    newPhoneNumberInput.setAttribute('size', '20');
    newPhoneNumberInput.setAttribute('value', '');
    div.appendChild(newPhoneNumberInput);


    numberOfPhoneInputs ++;
}

Ответы [ 3 ]

0 голосов
/ 08 февраля 2012

document.getElementByID должно быть document.getElementById

Эта ошибка должна отображаться в вашей консоли.

0 голосов
/ 08 февраля 2012

вам нужно внести эти изменения ...

  1. изменить document.getElementByID("phoneNumbers"); на document.getElementById("phoneNumbers");

  2. (необязательно) Это будетхорошо, если вы измените var div на var phoneNumbersDiv или что-то еще

Пример скрипты: http://jsfiddle.net/v8rF3/

Обновленный код: 

var numberOfPhoneInputs = 1;

function addPhoneNumber(){
    var div1 = document.getElementById("phoneNumbers");
    var newPhoneNumberInput = document.createElement('input');
    newPhoneNumberInput.setAttribute('type', 'text');           newPhoneNumberInput.setAttribute('name', 'phoneNumber['+numberOfPhoneInputs+']');
    newPhoneNumberInput.setAttribute('size', '20');
    newPhoneNumberInput.setAttribute('value', '');
    div1.appendChild(newPhoneNumberInput);

    numberOfPhoneInputs ++;
}
0 голосов
/ 08 февраля 2012

Вам нужно return false; из обработчика щелчка, чтобы предотвратить действие кнопки по умолчанию при отправке страницы.

...