<div> onClick not working?

javascript php html onclick

31,012

Solution 1

You should use single quotes.

Instead of

<div class="col-sm-10 " onClick="openUrlInNewTab("www.example.com");" >

you should have

<div class="col-sm-10 " onClick="openUrlInNewTab('www.example.com');" >

If you put double quotes inside double quotes it simple won't work.

So in PHP you should change:

 echo '<div class="col-sm-10" onClick="openUrlInNewTab("'.$myarray['Job']['link'].'");"><h3>';

into

echo '<div class="col-sm-10" onclick="openUrlInNewTab(\''.$myarray['Job']['link'].'\');"><h3>';

EDIT

One extra thing. If you want this url open in your browser, you should rather add http:// before www.example.com

Sample working HTML code:

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<div class="col-sm-12 col-xs-12 ">
 <div class="row " >
  <div class="col-sm-10 " onclick="openUrlInNewTab('http://www.example.com');" >
    <h3>Can you Code? </h3>
  </div>
 </div>
</div>
          <script>
    function openUrlInNewTab(url) {
// div click is not reaching  here
     alert(url); 
     window.open(url, "_blank");
}
</script>
</body>
</html>

Solution 2

onClick="openUrlInNewTab("www.example.com");"

should be

onClick="openUrlInNewTab('http://www.example.com');"

Use single quotes inside the function for the url.

Solution 3

onClick="openUrlInNewTab("www.example.com");"

should be

onclick="openUrlInNewTab('http://www.example.com');"

the rest is fine

31,012

Author by

user3755198

Updated on July 30, 2022

Comments

user3755198 almost 2 years

Iam printing some content using php code inside html but, when i tried to click on that div its not calling the function in onClick ??

Here is my php code

 echo '<div class="col-sm-12 col-xs-12 " ><div class="row ">';
echo '<div class="col-sm-10" onClick="openUrlInNewTab("'.$myarray['Job']['link'].'");"><h3>';
echo  $myarray['Job']['title']."</h3></div></div></div>";

this is resulting html code in "view source" of browser

<div class="col-sm-12 col-xs-12 ">
 <div class="row " >
  <div class="col-sm-10 " onClick="openUrlInNewTab("www.example.com");" >
    <h3>Can you Code? </h3>
  </div>
 </div>
</div>

and here is my function in html page

    function openUrlInNewTab(url) {
// div click is not reaching  here
     alert(url); 
     window.open(url, "_blank");
}

Marcin Nabiałek almost 10 years

@user3755198 I've added full sample HTML code. Just save it as html file and click on this file to open in browser
Jim almost 10 years

jQuery is great; but, it isn't always the best solution. There’s overhead to download the library and sometimes the added benefit isn't worth the extra network data cost (especially when targeting mobile devices).
Bojan Kovacevic almost 10 years

for this it is not worth. I like to use it though for ajax or some nice UI features.
Swiffy almost 10 years

@Jim What's with this overhead-talk almost every time jQuery is mentioned? It's not that bad, even if you are on mobile. You can download the library so it doesn't have to be fetched from CDN either.
Jim almost 10 years

@Piwwoli: My approach to software development is to "respect the user". They may be paying for their data usage on mobile; why force them to download the jQuery library just so I can add an onClick event? But, that just my style.
Swiffy almost 10 years

@Jim Guess it depends on the setting too. I'm making software for facilities and facility personnel, so data costs don't really matter to them using their company equipment and all. I find your approach somewhat interesting to be honest, because mine is probably something along the lines of making my job easier by sacrificing some, if any user experience. Besides the clients will never know and if they do, you can pretty much claim that jQuery is an industry standard library for web development.