Javascript - Отправить текст поля, Показать Div, Скрыть все остальные

Question

У меня есть простая форма (текстовое поле и кнопка отправки). Я пытаюсь, чтобы пользователь отправил число, и в результате число будет отображать один div (из набора div).

Я попытался использовать this example в качестве базы (когда пользователь нажимает на ссылку, она показывает div, но скрывает другие).

Мой тест ниже:

var divState = {}; 

function showhide(oFrm) { 
    var dividnum = oFrm.Inputed.value; 
    var prepar = "para"; 
    var divid = prepar + theInput; /* should result in something like "para52" */ 


    divState[divid] = (divState[divid]) ? false : true; 
    //close others 
    for (var div in divState){ 
     if (divState[div] && div != divid){ 
      document.getElementById(div).style.display = 'none'; 
      divState[div] = false; 
     } 
    } 

    divid.style.display = (divid.style.display == 'block' ? 'none' : 'block'); 
} 

http://jsfiddle.net/LfzYc/431/

Примечание: Я не специалист в JavaScript на всех, поэтому я с трудом.

Кроме того, я хотел бы добавить функцию ... если введенный номер не находится между 1-4, покажите другой div, возможно, с идентификатором paraEnd.

Answer 1

Пожалуйста, посмотрите на jsFiddle на основе вашего. Надеюсь, я сделал то, что ты хочешь. Я изменил функцию showhide и ваш HTML (исправил идентификаторы div и добавил еще один div#paraEnd). Я предлагаю вам реорганизовать ваш код.

Answer 2

Вы должны использовать jQuery, чтобы иметь простой способ управления DOM. Использование JQuery Я сделал пример для вас, просто изменить JS и вставить мое:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    (function ($) { 

     // get the paragraphs 
     var paragraphs = $('.paragraph'); 

     // form submit 
     $('#paragraphform').submit(function (e) { 
      // prevent the event to flow 
      e.preventDefault(); 

      // get the input value 
      var value = $('#Inputed').val() - 1; 

      // reset all divs removing active css class 
      paragraphs.removeClass('active'); 
      $('.error').removeClass('active'); 

      // verify if the value doens't exist 
      if(value < 0 || value > paragraphs.length - 1) { 
       $('.error').addClass('active'); 
       return; 
      } 

      // show the active div 
      paragraphs.eq(value).addClass('active'); 
     }); 

    })(jQuery); 

</script> 

Это то, что вам нужно?

Если вы не знакомы с JQuery, это JQuery центр ЖЖ: https://learn.jquery.com/

И это хороший учебник для начинающих: http://www.tutorialspoint.com/jquery/