Выберите меню для передачи переменной в функцию для изменения innerhtml - PullRequest
Новая
       0

Выберите меню для передачи переменной в функцию для изменения innerhtml

1 голос
/ 28 июня 2019

Я создаю страницу боковой панели для надстройки в Google Sheets.

Пользователь выберет тему в меню выбора (выпадающий список), который затем изменит внутренний HTML-файл div наотобразить другую тему справки.

Пока передается переменная, это то, что отображается.Я хочу, чтобы содержимое переменной отображалось в формате html.

Мне удалось выполнить эту работу из текстовых ссылок, но они заняли слишком много места на боковой панели, поэтому я перешел в меню выбора.

Я сделал более простой пример, чем моя фактическая боковая панель справки, чтобы было меньше кода для просмотра: 

<!DOCTYPE html>
<html>
<body>

<p>Select a choice from the list.</p>

<select id="topic" onchange="showContent(this.value)">
  <option value="choice1">This one</option>
  <option value="choice2">the next one</option>
  <option value="choice3">Yet another</option>
</select>

<p>When you select a choice, the output should change based on the value of the variable passed.</p>

<p id="helpContent">Results go here</p>

<script>
//VARS
	var choice1 = '<ul><li>This is the first choice<li></ul>';
	var choice2 = '<ul><li>This is the second choice<li></ul>';
	var choice3 = '<ul><li>This is the, like, third choice<li></ul>';
	
	function showContent(topic) {
  document.getElementById("helpContent").innerHTML = topic;
	}
	
</script>

</body>
</html>

1 Ответ

1 голос
/ 28 июня 2019

Используйте структуру данных для представления ваших элементов, а затем создайте их соответствующим образом 

<!DOCTYPE html>
<html>

<body>
  <p>Select a choice from the list.</p>
  <select id="topic" onchange="showContent(this.value)">
  <option value="choice1">This one</option>
  <option value="choice2">the next one</option>
  <option value="choice3">Yet another</option>
</select>

  <p>When you select a choice, the output should change based on the value of the variable passed.</p>

  <p id="helpContent">Results go here</p>

  <script>
    var choices = {
      "choice1": {
        list: ["item1", "item2", "item3"]
      },
      "choice2": {
        list: ["item1"]
      },
      "choice3": {
        list: ["item3"]
      },
    }

    function showContent(topic) {
      var currentChoice = choices[topic];
      if (currentChoice == null)
        return alert("Invalid choice");
      var newList = document.createElement('ul');
      for (var i = 0; i < currentChoice.list.length; i++) {
        var newListItem = document.createElement('li');
        newListItem.innerText = currentChoice.list[i];
        newList.appendChild(newListItem);
      }
      var sidebarContainer = document.getElementById("helpContent");
      sidebarContainer.innerHTML = "";
      sidebarContainer.appendChild(newList);
    }
    window.onload = function() {
      showContent("choice1");
    }
  </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...