I made many changes on this code but it didn't work, what step should I follow? I want to make whole section that include icon and button's text clickable. I have tried this method already but not sure is it true or not: onclick="location.href='';"

You can make corrections as you want, I'm open to any help, thank you.

#ana_div {
  height: 400px;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  background-color: #f7f7f7;
}

.ikon {
  margin-left: 30px;
  margin-top: 15px;
  position: absolute;
}

.div {
  display: inline-block;
  float: left;
  height: 80px;
  width: 300px;
  margin: 10px;
}

.btn {
  border: none;
  color: black;
  height: 80px;
  width: 300px;
  font-size: 19px;
  cursor: pointer;
  background-color: #fff;
}

.btn:hover {
  background-color: #4d4d4d;
}

<div id="ana_div">

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>

</div>

I made many changes on this code but it didn't work, what step should I follow? I want to make whole section that include icon and button's text clickable. I have tried this method already but not sure is it true or not: onclick="location.href='http://www.example.';"

You can make corrections as you want, I'm open to any help, thank you.

#ana_div {
  height: 400px;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  background-color: #f7f7f7;
}

.ikon {
  margin-left: 30px;
  margin-top: 15px;
  position: absolute;
}

.div {
  display: inline-block;
  float: left;
  height: 80px;
  width: 300px;
  margin: 10px;
}

.btn {
  border: none;
  color: black;
  height: 80px;
  width: 300px;
  font-size: 19px;
  cursor: pointer;
  background-color: #fff;
}

.btn:hover {
  background-color: #4d4d4d;
}

<div id="ana_div">

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>

</div>

• javascript
• html
• css

• What happened when you tried that? – Barmar Commented Jul 10, 2021 at 7:05
• 1 BTW, you shouldn't have multiple DIVs with the same ID. – Barmar Commented Jul 10, 2021 at 7:05
• make it clickable in order to do what? There are no urls shown. what exactly is your desired result? – Kinglish Commented Jul 10, 2021 at 7:07
• it was not clickable when i add url, i know ID things, just demo. – Jozef Stone Commented Jul 10, 2021 at 7:07
• A div is clickable by nature, are you trying to run javascript when you click a divs block? You can add CSS to indicate a hand when you hover over the div to let users know clicking on te div will do something. – dale landry Commented Jul 10, 2021 at 7:10

7 Answers 7

This is as simple as it gets, a div tag enclosed by an anchor tag.

a {
  text-decoration: none;
}

.big-div {
  height: 100px;
  width: 200px;
  background-color: red;
}

<a href="https://www.facebook./">
  <div class="big-div">
    <p>Click anywhere</p>
  </div>
</a>

you can write button click like this:

<button onclick=" window.open('http://www.google.', '_blank'); return false;">Continue</button>

if you don't want to use JS in your code, just add a tag before your columns

check this code

#ana_div {
    height: 400px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f7f7f7;
}

.ikon {
    margin-left: 30px;
    margin-top: 15px;
    position: absolute;
}

.div {
    display: inline-block;
    float: left;
    height: 80px;
    width: 300px;
    margin: 10px;
}

.btn {
    border: none;
    color: black;
    height: 80px;
    width: 300px;
    font-size: 19px;
    cursor: pointer;
    background-color: #fff;
}

.btn:hover {
    background-color: #4d4d4d;
}

 <div id="ana_div">
    <a href="https://google.">
        <div class="div" id="div">
          <div class="ikon">
            <img src="icon.png">
          </div>
          <button class="btn"> button1</button>
        </div>
    </a>

    <a href="https://microsoft.">
        <div class="div" id="div">
          <div class="ikon">
            <img src="icon.png">
          </div>
          <button class="btn"> button2</button>
        </div>
    </a>
</div>

Try enclosing div into anchor tag.

<a href= "http://www.example.">
<div id="ana_div">

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>

</div>
</a>

Add an anchor tag and add the href attribute to it. Then add some style to remove the line and change the color. finally you can add anything you want inside it. Otherwise you can create a anchor tag add the href and id. inside the onclick function of your div call a function redirect(). Inside the redirect() function add this code: document.getElementById("your-tag-id").click()

You need to create an event listener, then you can use a function to run the javascript you wish when the user clicks the div / button.

As for your redirect, you can create a new <a> tag element using JS, then add the appropriate attributes for target, src and lastly, use the click() function on it.

See JS Fiddle

Javascript:

let btn = document.querySelectorAll('.btn')

function redirectHeader(){
  let url = 'https://google.'
  const a = document.createElement('a')
  a.target = '_blank'
  a.href = url
  a.click()
}

btn.forEach(button => {  
  button.addEventListener('click', redirectHeader)
})

OK now I understood. Use this code snippet:

<div id="ana_div">
  <a href="https://example.">
  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>
  </a>
  
  <a href="https://example.">
  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>
  </a>

</div>