onClick not working?

Question

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");
}

Replace `"www.example.com"` with `'www.example.com'` (single quotes) — Phantom, Jul 16 '14 at 11:18
I came here because the question was the first search result for "onclick not working", but found the solution in [this question](https://stackoverflow.com/q/17769005/1804173). — bluenote10, May 31 '21 at 08:22

Marcin Nabiałek · Accepted Answer · 2014-07-16T11:25:38.457

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>

@user3755198 I've added full sample HTML code. Just save it as html file and click on this file to open in browser — Marcin Nabiałek, Jul 16 '14 at 11:26

score 2 · Answer 2 · answered Jul 16 '14 at 11:22

2

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

should be

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

Use single quotes inside the function for the url.

answered Jul 16 '14 at 11:22

Daniel Sirakov

112
1
2

score 2 · Answer 3 · answered Jul 16 '14 at 11:23

2

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

should be

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

the rest is fine

answered Jul 16 '14 at 11:23

sariDon

7,782
2
16
27

score 0 · Answer 4 · answered Jul 16 '14 at 11:20

0

You know how to use jQuery, right?

$(document).ready(function()
{
    $('div').on('click', function()
    {
        alert('clicked!');
    });
});

You can put onclick on div, but it most likely won't work like you're currently doing it because how javascript and php works. (I don't think those noclicks ever get bound)

answered Jul 16 '14 at 11:20

Swiffy

4,401
2
23
49

3

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). – Jim Jul 16 '14 at 11:30
1

for this it is not worth. I like to use it though for ajax or some nice UI features. – Bojan Kovacevic Jul 16 '14 at 11:31
@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. – Swiffy Jul 16 '14 at 11:41
@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. – Jim Jul 16 '14 at 11:50
@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. – Swiffy Jul 16 '14 at 12:00

onClick not working?

4 Answers4