Html Anchor Tag With JavaScript Onclick Event

HTML anchor tag with Javascript onclick event

If your onclick function returns false the default browser behaviour is cancelled. As such:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

Either way, whether google does it or not isn't of much importance. It's cleaner to bind your onclick functions within javascript - this way you separate your HTML from other code.

Including both href and onclick to HTML <a> tag

You already have what you need, with a minor syntax change:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

The default behavior of the <a> tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false, canceling the event (or the event hasn't been prevented)

how to call a onclick function in <a> tag?

Try onclick function separately it can give you access to execute your function which can be used to open up a new window, for this purpose you first need to create a javascript function there you can define it and in your anchor tag you just need to call your function.

Example:

function newwin() {              
 myWindow=window.open('lead_data.php?leadid=1','myWin','width=400,height=650')
}

See how to call it from your anchor tag

<a onclick='newwin()'>Anchor</a>

---

Update

Visit this jsbin

http://jsbin.com/icUTUjI/1/edit

May be this will help you a lot to understand your problem.

JavaScript - href vs onclick for callback function on Hyperlink

Putting the onclick within the href would offend those who believe strongly in separation of content from behavior/action. The argument is that your html content should remain focused solely on content, not on presentation or behavior.

The typical path these days is to use a javascript library (eg. jquery) and create an event handler using that library. It would look something like:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

Dynamically create onclick event anchor element - Javascript

a.onclick=myfunction()

Will set the return value of myfunction as onclick. What you want is the following:

a.onclick=myfunction

Appending the javascript onclick event to anchor tag

I've simplified your code somewhat. Consider the following:

var pair = '';
var eventOrganiserLink = '[EVENT ORGANISER LINK]';

pair += '<a href="#" onclick="window.open("'+ eventOrganiserLink +'", _system, location=yes);">Google</a>';

This would generate the following:

<a href="#" onclick="window.open("[EVENT ORGANISER LINK]", _system, location=yes);">Google</a>

The onclick attribute opens with double quote ("), which means it will look for the first double quote after that to close it. That's right after window.open( meaning that part is the only thing that will be set as the onclick attribute. See how the colors in the onclick attribute in the code box here at StackOverflow don't really match up?

It is a little tricky because we're mixing quotes (setting the pair variable) and double quotes (as text inside that variable, which will be used as html later on - so it needs to be valid).

You can use single quotes for the first window.open parameter and escape them in the assignment to your pair variable, like so:

var pair = '';
var eventOrganiserLink = '[EVENT ORGANISER LINK]';

pair += '<a href="#" onclick="window.open(\''+ eventOrganiserLink +'\', _system, location=yes);">Google</a>';

This would yield:

<a href="#" onclick="window.open('[EVENT ORGANISER LINK]', _system, location=yes);">Google</a>

Note the single quotes around [EVENT ORGANISER LINK]. Also note the colors now match up.

Onclick event on dynamic created anchor tag

Try replacing that line with the following, so that the event is bound like this:

var $link = $("<a href='javascript:void(0)'>Delete</a>");

$link.on("click", function() {
    deleteEducationLevel(educationHistoryId);
});

$('#'+educationHistoryId).append("<span>"+degreeTitle+"</span>").append($link);

In my (very reduced) test, this seems to work: http://jsfiddle.net/E7LRt/

Adding onclick function in anchor tag which is not working

you are just assigning but declaring it, just need to make it true, so given id would be readonly, please find below snippets

<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous">

<title>Mole Calculator | Chemistry Calculator</title>

</head>



<body>

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">

        <div class="container-fluid">
            <a class="navbar-brand" href="#"><h4>
                    <b>Chemistry Calculator</b>
                </h4></a>

            <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <ul class="navbar-nav  text-uppercase">

                    <li class="nav-item"><a class="nav-link active"
                        aria-current="page" href="/Chemistry-Calculator/">Home</a></li>

                    <li class="nav-item"><a class="nav-link active"
                        aria-current="page" href="/Chemistry-Calculator/about">About</a></li>


                </ul>

            </div>
        </div>
    </nav>

    <div class="container" style="padding-top: 5%;">

        <div class="card px-4 py-5" style="width: 650px;">
            <div class="card-block">

                <form action="/Chemistry-Calculator/Number-Of-Moles">

                    <div class="mb-3">
                        <label for="givenMass" class="form-label">Given Mass of
                            Substance</label> <input type="text" class="form-control" id="givenMass"
                            aria-describedby="emailHelp" name="givenMass"
                            value="${givenMass}" style="width: 600px">
                    </div>
                    <div class="mb-3">
                        <label for="molarMass" class="form-label">Molar Mass</label> <input
                            type="text" class="form-control" id="molarMass" name="molarMass"
                            value="${molarMass}" style="width: 600px">
                    </div>

                    <div class="mb-3">
                        <label for="moles" class="form-label">Moles</label> <input type="text"  class="form-control"                             id="moles" name="moles" value="${moles}" style="width: 600px">
                    </div>

                    <input class="btn btn-outline-success" type="submit"
                        value="Calculate">
                        
                    <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle"
                            data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
                            <li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
                            <li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
                        </ul>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="../javascript/script.js"></script>
    <script>
function readonlyForGivenMass() {
  document.getElementById("givenMass").readOnly = true;
    document.getElementById("molarMass").readOnly = false;
    document.getElementById("moles").readOnly = false;
}

function readonlyForMolarMass() {   
 document.getElementById("givenMass").readOnly = false;
     document.getElementById("molarMass").readOnly = true;
    document.getElementById("moles").readOnly = false;
}
  

 function readonlyForMoles() {
     document.getElementById("givenMass").readOnly = false;
     document.getElementById("molarMass").readOnly = false;
    document.getElementById("moles").readOnly = true;
}

    
    
    </script>

</body>
</html>

---

Related Topics