Проблемы с созданием динамической формы с помощью javascript и css: идентификация / отображение полей динамически не работают. Вы не могли бы мне помочь?

Question

пожалуйста, мне нужна помощь.Я пишу свой веб-сайт, и мне нужно создать «динамическую форму».Поэтому я решил сделать это с помощью JavaScript.У меня есть форма с различными полями.Два из них являются двумя переключателями.Их код:

<input id="prog" type="radio" name="tipo" value="app" onClick="app();" tabindex="4"><label for="prog">Ad un'applicazione</label></input> 
<input id="website" type="radio" name="tipo" value="sito" onClick="sito();" tabindex="5"><label for="website">Ad un sito Web</label></input> 

Как вы, наверное, заметили, у этих двух радиокнопок событие "onclick" связано с двумя функциями javascript.Их код:

function app() {
app=document.getElementById("app");
sito=document.getElementById("sito");
app.style.display = "block";
sito.style.display = "none";
}

function sito() {
sito=document.getElementById("sito");
app=document.getElementById("app");
sito.style.display = "block";
app.style.display = "none";
}

И, как вы, наверное, поняли, этот код javascript не работает.В первый раз, когда я выбираю одну из переключателей, она работает отлично;но после этого, если я пытаюсь изменить выбор, я получаю сообщение об ошибке (свойство объекта не поддерживается).То, что мне нужно сделать, это просто (не для меня, я ничего не знаю о javascript .. Я написал этот код после небольшого прочтения некоторых уроков): - Если выбрана первая радиокнопка, содержимое divс идентификатором «app» должно быть показано и содержание div с идентификатором «sito» должно быть найдено;- Если выбран второй переключатель, содержимое div с идентификатором «sito» должно отображаться, а содержимое div с идентификатором «app» должно быть выделено;

По умолчанию, конечно,два дива идены.Их правило CSS:

#app, #sito{
display: none;
}

Это правильный способ получить этот результат?Или вы можете предложить один лучше?Можете ли вы помочь мне понять причину, по которой этот скрипт не работает?И можете ли вы сказать мне, пожалуйста, как это исправить?

Извините за ошибки, которые я сделал в этом сообщении, я итальянец ...

   Vincenzo.

Answer 1

Это потому, что ваша функция и ваши переменные имеют одинаковые имена. Если не использовать var, переменные в области видимости определяются так же, как и ваши функции, в которых они объявлены.

 //here you declare a function with the name app in the global namespace
    function app() {
    //here you override app with a dom element
    app=document.getElementById("app");
    sito=document.getElementById("sito");
    app.style.display = "block";
    sito.style.display = "none";
    }

Используйте var для хранения переменных в функции в области действия функции:

  //here you declare a function with name app in the global namespace
    function app() {
    //now you create a new var app in the scope of the function and dont override the app function
    var app=document.getElementById("app");
    var sito=document.getElementById("sito");
    app.style.display = "block";
    sito.style.display = "none";
    }

Кстати, вы также можете переименовать функцию или ваши переменные в функции, но всегда лучше использовать «var», чтобы связать переменные с областью действия функции.