Создать перерабатываемую функцию и преобразовать строку в имя переменной

Question

Я пытаюсь установить флажок, чтобы показать / скрыть HTML-элемент, но я пытаюсь сделать его максимально эффективным (переработка одной функции и обеспечение ее развития, а не ручное и статическое написание уникальных функций).

Я уже преуспел в этом один раз, но в несколько ином сценарии (включая: «Извлечение JavaScript - Рабочая переработанная функция»), но не могу заставить его работать в этом новом сценарии (в том числе: «Извлечение JavaScript -Не работает переработанная функция.) Я извлек из нее все, что мог, но в этот раз у меня возникли трудности. Мой мозг через несколько часов застопорился, чтобы решить другие проблемы. У меня есть несколько элементов, ожидающих, чтобы использовать это, но сейчас я просто пытаюсь заставить его работать сначала с элементом Google.

HTML Extract

<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 Extract - WorkingВосстановленная функция

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);
        } 
    }
}

Извлечение JavaScript - не работает Восстановленная функция

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";
    }
}

РЕДАКТИРОВАТЬ: Я добавил гораздо больше деталей для тех, кто спросил сейчас.Извините, если все стало более запутанным.

Answer 1

Это будет моя попытка:

    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";
        }
    }

Возможно, я что-то упускаю, но я думаю, что что-то вроде выше должно работать

Answer 2

Я бы сделал что-то вроде этого ... вместо преобразования имен переменных, просто передайте переменные в вашу функцию 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>

JAVASCRIPT

function showOrHide(id){

alert(id);

var checkBox = document.getElementById(id+'-check');

if (checkBox.checked == 1){

document.getElementById(id).style.display = "none";

} else {

document.getElementById(id).style.display = "block";

}

}