CODEWITHSUNDEEP
javascriptdebugging
Erica
Erica

Reputation: 409

Getting a second JS function to fire

I can't figure out why my JS function won't fire. A toggle function is working, but the showme function isn't. There are no console errors so I'm not sure how to debug.

It's trying to be a 2-part interaction: 1) click in field and menu displays 2) click on menu and toggle buttons display

The full code is here: https://jsfiddle.net/ericaheinz/cjhxzmn6/4/

Here are my js functions:

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

Upvotes: 0

Views: 66

Answers (3)

Peter Collingridge
Peter Collingridge

Reputation: 10979

I see a console error saying "showme" not defined (toggle is also not defined). I think this is because the javascript will be added to the page below the HTML.

If you add this to the HTML window in your jfiddle above the HTML, it should work:

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

EDIT: The issue is that you only show the buttons when the focus is on the input, so as soon as you try to click the buttons they are hidden.

It's a bit hacky, but you can add:

.multipart__menu:hover {
    display: block;
}

This will make sure the button doesn't disappear as soon as you try to click it.

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42054

As per comment you need avoid to inline js. In any case, you have an input text box love1. That's the issue. Try to add a show__multipart__menu click handler for this element:

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>

Upvotes: 1

mbojko
mbojko

Reputation: 14689

The HTML structure is at fault, although I'm not exactly sure, how. The button doesn't get the click event. Move them outside the div, and voilà, it works.

        <div class="multipart">

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

https://jsfiddle.net/6bk28fyn/

Upvotes: 0

Related Questions