How to Call a Js Function Using Onclick Event

Unable to call JS function from onclick event

Firstly note that in your if condition you need to use == (not =) to compare values.

To solve your issue you have two options. Firstly you could simply move the RemoveCode function out of the scope of the document.ready handler so that it can be accessed from the onclick attribute:

<script type="text/javascript">
    function RemoveCode(codeType)
    {
        // your code...
    }

    $(document).ready(function ()
    {
        // your code...
    });
</script>

Alternatively, it would be much better practice to add your event handlers using unobtrusive Javascript. As you're using jQuery, here's how you can do that:

$(function() {
  $('button').click(function() {
    var $selectedProjectsField = $("#SelectedProjects");
    var $selectedProjectCodesField = $("#SelectedProjectCodes");
    var $selectedTasksField = $("#SelectedTasks");
    var $selectedTaskCodesField = $("#SelectedTaskCodes");
    var selectedOption;

    if ($(this).data('codetype') == "Project") {
      selectedOption = $selectedProjectsField.find(':selected').index();
    } else {
      selectedOption = $selectedTasksField.find(':selected').index();
    }

    alert(selectedOption);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label for="SelectedProjects">Selected Projects:</label>
    <select size="1" id="SelectedProjects" name="SelectedProjects" multiple></select>
    <button class="removeButton" data-codetype="Project" type="button">-</button>
  </li>

  <li>
    <label for="SelectedTasks">Selected Tasks:</label>
    <select size="1" multiple id="SelectedTasks" name="SelectedTasks"></select>
    <button class="removeButton" data-codetype="Task" type="button">-</button>
  </li>
</ul>

How to Call javascript function with onclick event in another page html

I advice you use .php instead of .html.
With php, you can receive a query String and pass it to your js filterSelection().
On the index.php, the button should be like
<a href="receiving-page.php?category=programming"><button class="btn active">Button name</button></a>
Now on the receiving-page.php page, type the following at the top of the page..

<?php
  //default value
  $category = 'all';
  if(isset($_GET['category']) && !empty($_GET['category'])){
  $category = $_GET['category'];
  }
  ?>

Then type the following in your js..

//create an array of all the categories called all_categories.
//A user might literally type a crazy query string so we verify
let fromURL = '<?php echo $category;?>';
filterSelection(all_categories.includes(fromURL) ? fromURL : 'all');

Javascript - Calling a function for an onClick event

First of all, thanks for taking the time to reply.

In the end, I took a look at the following answer : https://stackoverflow.com/a/21477793/3186538 and I ended up with this code :

<html>

<head>
</head>

<body>
    <script>
        // Display text function
        function showAlert(text) {
            alert("Called in showAlert: " + text);
        }
        // But for the previous function to work, we must make sure that it is loaded after the rest of the DOM
        window.onload = function() {
            document.getElementById("aTag").onclick = function fun() {
                showAlert("Hello World");
            }
        }
    </script>

    <table>
        <tr>
            <td><a href="javascript:void(0)" id="aTag">TEST</a></td>
        </tr>
    </table>
</body>

</html>

Now, when I click on the hyperlink, I do get a dialog box showing the Hello World message.

Thanks again to everyone (and, of course, SO).

Calling a javascript function on button onclick

encode.onclick() tries to call onclick immediately. This gives you a value. (Or it throws an exception because it is undefined instead of a function you can call).

=Encode(); then calls Encode immediately and tries to assign its return value to the LHS. Since the LFS is a value (and not a property or a variable), this throws an error.

The correct (albeit ancient) syntax would be encode.onclick = Encode.

The modern approach is addEventListener. Stick to that.

How to call multiple JavaScript functions in onclick event?

onclick="doSomething();doSomethingElse();"

But really, you're better off not using onclick at all and attaching the event handler to the DOM node through your Javascript code. This is known as unobtrusive javascript.

Onclick calling functions diffrences

In the original post, there's already a post on function() vs function.

In summary (and in layman terms), though, there are 2 ways on how you handle onClick.

When you want to pass some value to the function

//the button
<button onClick={() => myFunction('I am a click')}>Button</button>

//the function
const myFunction = (value) => {
     console.log(value) //prints 'I am a click'
}

When you do NOT need to pass any value (events/default props will be passed by default)

//the button
<button onClick={myEvent}>Button</button>

//the function
const myFunction = (event) => {
     console.log(event) //prints the button element
}

Creating a custom Button component with custom props.

const MyButton = ({ onClick }) => {
   const customOnClick = () => {
       onClick('Somebody', 'Special'); //we call the onclick here
   }   

   return <button onClick={customOnClick}>Click Me</button>
}

const App =() => {

   //the onClick in MyButton component actually triggers this function.
   const onClick = (value, value2) => {
       console.log(value,value2) //prints "Somebody Special"
   }
   return (<MyButton onClick={onClick} />) // i do not need to specify the props to pass
}

Call JavaScript function(with parameters) by onclick event

You try this
function myFunction(ide,name) { change insted of id => ide
echo "<button onclick='myFunction(".'"'.$intvar.'","'.$strvar.'"'.")' type='button'>ClickMe</button>";

How to call two different functions after one click of an onClick button

Just encapsulate them in a single callback:

<button id="button" type="button" onclick="reserveRoom()"> 
    RESERVE ROOM
</button>

function reserveRoom() {
  [write, message].forEach(x => x());
}