Javascript 创建一个可循环使用的函数，并将字符串转换为变量名

我试图创建一个复选框来显示/隐藏HTML元素，但我试图使其尽可能高效（循环使用一个函数并使其不断发展，而不是手动静态地编写唯一的函数）

这一次我已经成功了，但是在一个稍微不同的场景中（包括：“JavaScript提取-工作循环函数”），但无法在这个新场景中工作（包括：“JavaScript提取-不工作循环函数”）.我已经从中找到了我能找到的东西，但这次我遇到了困难。我的大脑在解决其他问题的几个小时后有点停顿。我有多个元素在等待使用它，但现在我只是想让它首先与谷歌元素一起工作

HTML摘录

<div id="googleContainer">
    <input type="text" id="googleSearchBox" title="Google Search" class="searchBox" />
    <input type="button" id="googleSearchButton" onClick="execSearchWithClick(this.id)" />
</div>
<input type="checkbox" id="googleCheck" checked="checked" onClick="setPref(this.id)"/>

JavaScript提取-无法使用循环函数

var googleHome = "http://www.google.com/"; //Set home page
var googleSearchURL = googleHome + "search?q="; //Prime search URL
function execSearchWithClick(id){
    alert(id) //Check ID
    var searchBox = document.getElementById(id.replace("Button", "Box")); //Convert "googleSearchButton" to "googleSearchBox" to match target element
    var searchQuery = searchBox.value; //Extract value from converted string-to-variable

    if (searchQuery == ""){
        if (id == "googleSearchButton") {
            window.open(googleHome);
        } //I would use "if(condition && condition)" rather than nested IFs here, but I plan to use ELSE IF very soon
    } else {
        if (id == "googleSearchButton") {
            window.open(googleSearchURL + searchQuery);
        } 
    }
}

var googleDisplay = true;
function setPref(id){
    alert(id) //Check ID
    var checkboxDisplayString = document.getElementById(id.replace("Check", "Display")); //Convert "googleCheck" to "googleDisplay" to match boolean variable
    alert(checkboxDisplayString) //Null value reply
    var checkboxDisplayVar = checkboxDisplayString //Convert (what I suspect to be) String to variable name
    alert(checkboxDisplayVar) //Null value reply

    if (id == "googleCheck" && checkboxDisplayVar == true){
        checkboxDisplayVar = false;
        applyPref();
    } else {
        checkboxDisplayVar = true;
        applyPref();
    }
}

function applyPref(){
    if (googleDisplay == true){
        document.getElementById("googleContainer").style.display = "block";
    } else {
        document.getElementById("googleContainer").style.display = "none";
    }
}

---

编辑：我已经为那些现在提问的人添加了更多的细节。如果一切变得更加混乱，很抱歉。

我会这样做。.不转换变量名，只需将变量传递给函数onCLick

<div id="one" style="width:100%;height:100px;background-color:#000;"></div>
<form>
<input id="one-check" type="checkbox" name="one" onclick="showOrHide('one');">
</form>
<div id="two" style="width:100%;height:100px;background-color:#000;"></div>
<form>
<input id="two-check" type="checkbox" name="two" onclick="showOrHide('two');">
</form>

---

我会这样做..不转换变量名，只需将变量传递给函数onCLick

<div id="one" style="width:100%;height:100px;background-color:#000;"></div>
<form>
<input id="one-check" type="checkbox" name="one" onclick="showOrHide('one');">
</form>
<div id="two" style="width:100%;height:100px;background-color:#000;"></div>
<form>
<input id="two-check" type="checkbox" name="two" onclick="showOrHide('two');">
</form>

---

这将是我的尝试：

    function setPref(id){
        var checkbox = document.getElementById(id);
        applyPref(checkbox.checked);      
    }

    function applyPref(show){
        if (show){
            document.getElementById("googleContainer").style.display = "block";
        } else {
            document.getElementById("googleContainer").style.display = "none";
        }
    }

---

我可能遗漏了一些东西，但我认为像上面这样的东西应该会起作用

这将是我的尝试：

    function setPref(id){
        var checkbox = document.getElementById(id);
        applyPref(checkbox.checked);      
    }

    function applyPref(show){
        if (show){
            document.getElementById("googleContainer").style.display = "block";
        } else {
            document.getElementById("googleContainer").style.display = "none";
        }
    }

---

---

我可能遗漏了一些东西，但我认为类似上面的东西应该可以工作

有没有理由不使用库？（例如jQuery）这个“googleDisplay”HTML元素在哪里？如果没有这样的元素，那么来自“getElementById（）的空结果“这并不奇怪。对不起，我不清楚你想达到什么目的。您能否非常明确地说明您希望代码做什么？ThanksI没有将其包含在摘录中，因为它指向其他文件，然后我必须包含这些文件，这里会变得一团糟。可以说，我已经成功地隐藏了这个元素（所以我知道它可以工作并且可以完成），但是它写得不太干净，我决定再试一次。我真的不喜欢使用jQuery。我才刚开始学习JavaScript，我更喜欢从头开始学习，而不是简单地退出。有没有理由不使用库？（例如jQuery）这个“googleDisplay”HTML元素在哪里？如果没有这样的元素，那么“getElementById（）”的空结果就不足为奇了。对不起，我不清楚您想要实现什么。您能否非常明确地说明您希望代码做什么？ThanksI没有将其包含在摘录中，因为它指向其他文件，然后我必须包含这些文件，这里会变得一团糟。可以说，我已经成功地隐藏了这个元素（所以我知道它可以工作并且可以完成），但是它写得不太干净，我决定再试一次。我真的不喜欢使用jQuery。我才刚开始学习JavaScript，我更喜欢从头开始学习，而不是简单地解决问题。我没有编辑我的全部代码，而是把它放在这里：它似乎没什么用处。。另外，我更喜欢我理解的代码。我真的不明白那里发生了什么事对不起，我不知道你在使用复选框，我已经更新了它。>>我非常感谢您的时间和努力，好心的先生，我的问题已经解决了。但是你的方式也很好！：）我希望你也带我去西德。这是一个非常有用的工具！：除了编辑我的全部代码外，我还把它放在这里：它似乎没什么用处。。另外，我更喜欢我理解的代码。我真的不明白那里发生了什么事对不起，我不知道你在使用复选框，我已经更新了它。>>我非常感谢您的时间和努力，好心的先生，我的问题已经解决了。但是你的方式也很好！：）我希望你也带我去西德。这是一个非常有用的工具！：先生，你是个天才。有点奏效了。我不得不将其修改为：函数setPref（id）{var checkbox=document.getElementById（id）；applyPref（checkbox.checked，id）；}函数applyPref（show，id）{var container=document.getElementById（id.replace（“Check”，“container”）；if（show）{container.style.display=“block”}else{container.style.display=“无”；}所以无论勾选了什么复选框，它都可以工作。但是，是的，谢谢你，伙计！很高兴它起到了作用。我认为在你的“非工作”版本中，JavaScript变量的名称和页面上元素的ID之间存在一些混淆，但无论如何，看起来你现在在那里。祝你好运！先生，你是个天才。这有点奏效了。我不得不这么做将其修改为：函数setPref（id）{var checkbox=document.getElementById（id）；applyPref（checkbox.checked，id）；}函数applyPref（show，id）{var container=document.getElementById（id.replace（“Check”，“container”）；if（show）{container.style.display=“block”；；else{container.style.display=“none”}这样它就可以与勾选的复选框一起工作。但是，是的，谢谢你，伙计！很高兴它起到了作用。我认为在你的“非工作”版本中，JavaScript变量的名称和页面上元素的ID之间有一些混淆，但无论如何，看起来你现在就在那里。祝你好运！