Errors after adding a new function to a button in index.html js

[Carrosen]

Problem

Getting error when running cucumber after implementing show/hide function for add contact button in html, added the same function for the save contact button aswell. Everything works on the localhost but the tests are failing. See screenshot

Background

All green before the new function

Spec

When('I click {string}', async function(string) {
  return await this.clickOnButton(string)
});

  async clickOnButton(btnName) {
    const btnSelector = this.btnSelectorFromName(btnName.toLowerCase())
    await this.page.waitForSelector(btnSelector)
    await this.page.click(btnSelector)

Implementation code

  <script type="text/javascript">
    function showHideDiv(ele) {
      var srcElement = document.getElementById(ele);
      if (srcElement != null) {
        if (srcElement.style.display == "block") {
          srcElement.style.display = 'none';
        }
        else {
          srcElement.style.display = 'block';
        }
        return false;
      }
    }
  </script>

        <input type="button" value="Add Contacts" onClick="showHideDiv('divMsg')"/><br><br>
        <div id="divMsg" style="background-color: #006969; color: #ffffff; height: 200px; width: 200px; text-align: center; display:none">

    <input class="save-contact" type="submit" value="Save Contact" onClick="showHideDiv('divMsg')"/><br><br>

Screenshots

How did you try to solve the problem?

Went through the code but can't find the error,
Tried to google it, it may be something to do with puppeteer but I don't think that is the case here. So I did not find anything relevant.

[oliverochman]

You need to add a class to your input field which calls on the function showHideDiv('divMsg'). The test cant find it because of that.

<input class="add-contact" type="button" value="Add Contacts" onClick="showHideDiv('divMsg')"/>