Question 88715 in Javascript Question posted in
A very good W3school tutorial can be found here.

javascript click this svg button ? tested but not working

am trying to click this svg button however it is not working due to some code input maybe not in the right order or format.

var hangoutButton = document.getElementsByClassName("M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z");
hangoutButton.click();

html code from firefox

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5 ml-auto my-4 text-gray-500 hover:text-gray-700 cursor-pointer"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>

some image reference
enter image description here 1

enter image description here 2

Tags:

2

Answers


  1. 0

    You have to target the instance of the element for it to be triggered with the click() function. Ideally, it would be best if you’d include a unique identifier, like an id attribute for your target element, and target it with either document.querySelector(), or document.getElementById().

    The document.getElementsByClassName() targets the DOM elements with specified class attribute and stores them in a list. However, note that:

    M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z Is not a value of a class attribute, but a d attribute, in the <path> element.

    If you intend on targeting the element using the d attribute. Then the following querySelector will do the trick:

    var myElement = document.querySelector('path[d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"]');

myElement.addEventListener('click', () => {
    alert('Hello World!');
});

    EDIT:

    "Hello World!" message is displayed once the user clicks the element. Unfortunately, myElement.click() function logs an error in the console:

    Uncaught TypeError: myElement.click is not a function

    I’m not an expert on why that is, but I know alternative solution to this issue. By wrapping the <svg> element with a <button> or an <a> (anchor) tag.

    Apply the onClick event to the wrapper element instead and use that wrapper as the target element for click() trigger. Here is an example:

    // Select the wrapper <button>, as target
var target = document.getElementById('myButton');

// Add onClick event to target button
target.addEventListener('click', () => {
    alert('Hello World!');
});

// Execute target button's onClick event
target.click();
    <button id="myButton" type="button" style="height: 50px; width:50px; border: none; background-color: transparent">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5 ml-auto my-4 text-gray-500 hover:text-gray-700 cursor-pointer">
    <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
  </svg>
</button>
    Login or Signup to reply.
  2. 0

    When you write:

    var hangoutButton = document.getElementsByClassName("M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z");

    you get a list of object which have the mentioned class.
    (Also in this case the class of SVG does not match with the one in script)

    Try out this, It works for me:

    var hangoutButton = document.getElementsByClassName("w-5 h-5 ml-auto my-4 text-gray-500 hover:text-gray-700 cursor-pointer")[0];
hangoutButton.click();

    Here I used the same class of SVG element and also took the first object in the list at index 0.

    I tested the SVG click functionality as:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Scroll Down to See the Button</h1>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      aria-hidden="true"
      style="margin: 100px"
      class="w-5 h-5 ml-auto my-4 text-gray-500 hover:text-gray-700 cursor-pointer"
    >
      <path
        fill-rule="evenodd"
        d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
        clip-rule="evenodd"
      ></path>
    </svg>
    <script>
      var hangoutButton = document.getElementsByClassName("w-5 h-5 ml-auto my-4 text-gray-500 hover:text-gray-700 cursor-pointer")[0];
      hangoutButton.onclick = function () {
        alert("Hangout button clicked!");
      };
    </script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search