javascript - 使用 javascript 和 css : iding/showing fields dynamically doesn't work. 制作动态表单时出现问题 你能帮帮我吗？

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 一无所知。我在阅读了一些教程后写了这段代码):- 如果选择了第一个单选按钮，必须显示id为“app”的div的内容，id为“sito”的div的内容必须被idden；- 如果选择第二个单选按钮，必须显示id为“sito”的div的内容，id为“app”的div的内容必须被idden；

当然，默认情况下，这两个div 是idden 的。他们的 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”将变量绑定(bind)到函数的范围内。