Получение второй функции JS для стрельбы

Question

Я не могу понять, почему моя функция JS не сработает.Функция переключения работает, а функция showme - нет.Нет ошибок консоли, поэтому я не уверен, как отлаживать.

Это попытка быть взаимодействием из двух частей: 1) щелкните в поле, и меню отобразит 2) нажмите на меню и отобразить кнопки переключения

Полный код здесь: https://jsfiddle.net/ericaheinz/cjhxzmn6/4/

Вот мои функции js:

    function showme() {
      alert("Woo!");
      var y = document.getElementById("why1");
      y.style.display = "none";
      var z = document.getElementById("love1");
      z.value = "Title 1";
    } 

    function toggle(button) {
      button.classList.toggle("is-on");
    }

Answer 1

Я вижу ошибку консоли, говорящую, что "showme" не определен (переключение также не определено).Я думаю, это потому, что javascript будет добавлен на страницу ниже HTML.

Если вы добавите это в окно HTML в вашем jfiddle над HTML, он должен работать:

<script>
function showme() {
    alert("Woo!");
    var y = document.getElementById("why1");
    y.style.display = "none";
    var z = document.getElementById("love1");
    z.value = "Title 1";
}
</script>

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

Это немного странно, но вы можете добавить:

.multipart__menu:hover {
    display: block;
}

Это позволит убедиться, что кнопка не исчезнет, ​​как только вы попытаетесь нажать на нее.

Answer 2

В соответствии с комментарием вам нужно избегать встроенных JS. В любом случае, у вас есть текстовое поле ввода love1 . Это проблема. Попробуйте добавить обработчик кликов show__multipart__menu для этого элемента:

function show__multipart__menu() {
    document.getElementById('titles1').style.display = 'block';
    document.getElementById("why1").style.display = 'none';
}
function showme(ele) {
    document.getElementById('titles1').style.display = 'none';
    var y = document.getElementById("why1");
    y.style.display = "block";
    var z = document.getElementById("love1");
    z.value = ele.textContent;
}

function toggle(button) {
    button.classList.toggle("is-on");
}

input[type='text'] {
    border: 2px solid #EB2B5E;
    background: #FFF url() no-repeat 5px 5px;
    display: block;
    width: 480px;
    margin: 16px auto;
    font-size: 18px;
    padding: 10px 10px 10px 42px;
}
.multipart {
    position: relative;
}
.multipart__menu {
    display: none;
    position: absolute;
    width: 480px;
    border: 1px solid #DDD;
    border-bottom: 0;
    border-top: 0;
    z-index: 99;
    top: 45px;
    left: 80px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
}
.multipart input:focus + .multipart__menu {
    display: block;
}
.multipart__menu button {
    display: block;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    padding: 10px 10px 10px 46px;
    text-align: left;
    background-color: #fff;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #eeeeee;
}
.multipart__menu button:hover {
    background-color: #FEF4F7;
    cursor: pointer;
}
.multipart__why {
    display: none;
}
.multipart__why.is-visible {
    display: block;
}
/* BUTTONS */
.toggle {
    display: inline-block;
    margin: 0 1px 8px 0;
    padding: 0px 10px;
    background: white;
    color: #222;
    border: 1px solid #00B7FF;
    border-radius: 13px;
    height: 24px;
    line-height: 22px;
    font-size: 14px;
    transition: all .1s ease-in-out;
}
.toggle:hover {
    cursor: pointer;
    color: #00B7FF;
}
.toggle.is-on {
    background: #00B7FF;
    color: white;
}

<div class="multipart">
    <input onclick="show__multipart__menu()" type="text" class="love" id="love1">
    <div class="multipart__menu" id="titles1" >
        <button onclick="showme(this)">Title 1</button>
        <button onclick="showme(this)">Title 2</button>
    </div>
    <div class="multipart__why" id="why1">
        <h4>Why?</h4>
        <button class="toggle" onclick="toggle(this)">Option A</button>
        <button class="toggle" onclick="toggle(this)">Option B</button>
        <button class="toggle" onclick="toggle(this)">Option C</button>
        <button class="toggle" onclick="toggle(this)">Option D</button>
        <button class="toggle" onclick="toggle(this)">Option E</button>
        <button class="toggle" onclick="toggle(this)">Option F</button>
    </div>
</div>

Answer 3

Ошибка в структуре HTML, хотя я не совсем уверен, как. Кнопка не получает событие нажатия. Переместите их за пределы div, и вуаля, это работает.

        <div class="multipart">

          <input type="text" class="love" id="love1">
          <button onclick="showme()">Title 1</button>
          <button>Title 2</button>

https://jsfiddle.net/6bk28fyn/