Getting a second JS function to fire

Question

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

This is very unclear, and will likely be flagged. What do you expect will be running `showme`? — Steven Stark, Mar 29 '19 at 21:35
Possible duplicate of [Uncaught ReferenceError: function is not defined with onclick](https://stackoverflow.com/questions/17378199/uncaught-referenceerror-function-is-not-defined-with-onclick) — Jeto, Mar 29 '19 at 21:37
You have your button hidden `display: none;` in the CSS, and you are not updating it to be visible. — ABC, Mar 29 '19 at 21:38

Peter Collingridge · Accepted Answer · 2019-03-29T22:02:42.707

2

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.

edited Mar 29 '19 at 22:02

answered Mar 29 '19 at 21:44

Peter Collingridge

10,849
3
44
61

Tried it but still no luck: https://jsfiddle.net/ericaheinz/cjhxzmn6/9/ – Erica Mar 29 '19 at 21:48
@Erica your CSS is hiding the buttons. If you remove all the CSS, then you can see the buttons and click on them. – Peter Collingridge Mar 29 '19 at 21:52
I've just realised what you're trying to do. The issue is that you only show the buttons when you have focus. But as soon as you try to click on the button, it loses focus and is hidden. – Peter Collingridge Mar 29 '19 at 21:55
@Erica OK, I've updated my answer, which I think fixes the issue. – Peter Collingridge Mar 29 '19 at 22:03
This worked! Since the menu buttons were hidden at first, the JS couldn't trigger them. I changed the show/hide behavior for the menu to be JS too, instead of my CSS hack. – Erica Mar 30 '19 at 00:26

score 1 · Answer 2 · answered Mar 29 '19 at 21:56

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>

score 0 · Answer 3 · answered Mar 29 '19 at 21:53

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/

Getting a second JS function to fire

3 Answers3