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

Question

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

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

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 Extract - Работа переработаны Номер функции

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 Extract - не работает Recycled Функция

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

EDIT: Я добавил гораздо больше деталей для тех, кто сейчас спросил. Извините, если все стало более запутанным.

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

} 

}