Обновление страницы, javascript не работает

Я новичок в веб-программировании, никогда не играл с ним за базовым уровнем и начал небольшой проект по графике с холстом HTML5. Начав строить базовую страницу reallu, я столкнулся с некоторыми материалами HTML/JS, которые довольно просты, но я для жизни не могу понять, что случилось. По какой-то причине это не сработает.Обновление страницы, javascript не работает

Я был первоначально хостинг JS во внешнем файле, но в той же директории, такой как

<script src="numValues.js"></script>

Является ли это правильно или лучшая практика?

Мои Markup/JS

<!DOCTYPE html> 
<html lang="eng"> 
    <head> 
     <META charset="UTF-8"/> 
     <title>EZgraph | Pie Chart</title> 
     <script type="text/javascript"> 
function addFields() 
{ 
    var numValues = document.getElementById("numValues").value; 

    var container = document.getElementById("container"); 

    while(container.HasChildNodes()) 
    { 
     container.removeChild(container.lastChild); 
    } 

    for (i=0; i < numValues; i++) 
    { 
     container.appendChild(document.createTextNode("value " + (i+1))); 
     var input = document.createElement("input"); 
       input.type = "number"; 
       input.name = "Value" + i; 
       container.appendChild(input); 
       container.appendChild(document.createElement("br")); 
    } 
} 
     </script> 
    </head> 
    <body> 
     <div id="inputCountText"></div> 
     <form method="post" onsubmit="return addFields()"> 
      <input type="number" id="numValues" required> 
      <input type="submit" value="submit"> 
     </form> 
     <div id="container"></div> 
    </body> 
</html>

Есть ли хорошие среды IDE/настройки для такого рода работы на Mac? В настоящее время я использую SublimeText.

источник

2013-10-07 Eogcloud

Это обычно лучше всего держать код JavaScript в отдельном файле. Для действительно простых вещей это не всегда стоит накладных расходов, но по мере того, как код растет по сложности, лучше отделить его. Это был единственный вопрос? Название подразумевает, что что-то еще не так, но вы не упомянули об этом. – David

Да, код выглядит отлично, но не работает. Я ввожу в текстовое поле, нажимаю submit, и страница ничего не делает. Я предполагаю, что мой недостаток опыта означал, что я пропускаю что-то глупое, но я над этим и над ним и не могу найти ошибку. Я был изначально, но в целях простоты я его встроил. Когда вы обратитесь к внешнему JS, следует ли использовать что-то вроде моего первого образца кода? – Eogcloud

Когда вы говорите «он не работает», что * делает * он делает? Код JavaScript определенно выполняется при загрузке страницы (если JavaScript не отключен в браузере, что возможно). Вы пробовали пройти через него в отладчике? В наши дни браузеры имеют очень полезные инструменты для отладки, такие как инструменты разработчика Firebug или Chrome. На консоли браузера может быть ошибка, на которую вы просто не смотрите. Или, может быть, логическая ошибка в коде, который вы можете найти, пройдя через отладчик. – David

См. Мой комментарий к своему собственному ответу. Кроме того, вы всегда должны проверить, если вы получите то, что вам нужно:

function addFields() 
{ 
    var returnValue = false; 
    var numValues = document.getElementById("numValues").value; 
    if (numValues.length != 0) 
    { 
     var container = document.getElementById("container"); 
     if (container.length != 0) 
     { 

      while (container.hasChildNodes()) 
      { 
       container.removeChild(container.lastChild); 
      } 

      for (i = 0; i < numValues; i++) 
      { 
       container.appendChild(document.createTextNode("value " + (i+1))); 
       var input = document.createElement("input"); 
       if (input.length > 0) 
       { 
        input.type = "number"; 
        input.name = "Value" + i; 
        container.appendChild(input); 
        container.appendChild(document.createElement("br")); 
        returnValue = true; 
       } 
      } 
     } 
    } 
    return returnValue; 
}

источник

2013-10-07 21:22:01 Dementic

Я вижу, что вы имеете в виду в приведенном выше комментарии. Вопрос, хотя ваш второй вложенный контейнер проверки инструкции.длина, почему это здесь? containster - это пустой div с идентификатором и идентификатором, чтобы удерживать сгенерированные поля, изначально он всегда будет 0? – Eogcloud

смотрите здесь: http://stackoverflow.com/questions/7204155/check-whether-a-div-exists-and-redirect-if-not – Dementic

Вы посмотрели на консоль браузера? Safari на самом деле не так уж плохо для отладки. Консоль должна показать вам, где ошибка.

Обычно я использую что-то вроде следующего, чтобы проверить, какие команды были выполнены.

console.log('Step 1');

источник

2013-10-07 21:01:42

наконец-то нашел мою проблему, это синтаксис

container.HasChildNodes()

должен быть

container.hasChildNodes()

страница показывает сформированные поля для мгновенного, но затем они исчезают? Почему это?

источник

2013-10-07 21:13:26 Eogcloud

, потому что страница была отправлена. вы должны «возвращать false», если вы не хотите, чтобы страница была отправлена. – Dementic

Это та информация, которую мне не хватает на эту тему, даже не осознала, что это была проблема, которая существовала. Спасибо! – Eogcloud

Обновление страницы, javascript не работает

ответ

Смежные вопросы