Is it possible to get a href inside an onclick?

Question

I need to get links inside onclicks functions in the DOM.

The link is:

<div class="producto_no_hover" onclick="window.location.href='http://kenayhome.com/6279-dixon-cabecero-tapizado.html'" style="cursor: pointer; width: 273px; height: 227px; margin-top: 20px; overflow: hidden; background: url(http://img1.kenayhome.com/13268/dixon-cabecero-tapizado.jpg) 50% 50% / cover no-repeat;">
    <div class="comprar_lupa" style="overflow: hidden; opacity: 0; width: 0px;">
        <div class="colores">
            <ul>
                <li><img src="http://img3.kenayhome.com/img/co/2332.jpg" alt="Blanco" width="22" height="22"></li>
                <li><img src="http://img3.kenayhome.com/img/co/2333.jpg" alt="Crema" width="22" height="22"></li>
            </ul>
        </div>
        <div style="float:right; margin: 0px 5px">
            <a class="boton_add_cart comprar" href="http://kenayhome.com/carro-de-la-compra?add=&amp;id_product=6279&amp;token=3949f34ffcc8206453a2425d90f8e04a" rel="ajax_id_product_0" title="Add to cart">
            </a>
        </div>
        <a href="http://kenayhome.com/6279-dixon-cabecero-tapizado.html">
            <div class="lupa"></div>
        </a>
    </div>
    <div class="tam_producto" style="height: 227px; overflow: hidden;">
        <div class="datos_producto" style="padding: 6px 0px 0px 3px;">
            <div class="precios">
                <div class="precio_anterior"></div>
                <div class="frase_precio">En Kenay</div>
                <div class="precio_actual">218,00 €</div>
            </div>
        </div>
    </div>
    <div class="mas_datos_producto" style="width: 273px; height: 75px; overflow: hidden;">
        <div class="nombre_producto">
            <h3>Dixon cabecero tapizado</h3>
        </div>
        <div class="description" style="display: none;">
            Consigue&nbsp;un&nbsp;  estilo nórdico  &nbsp;en tu dormitorio con el&nbsp;  cabecero tapizado capitone&nbsp;  Dixon  .&nbsp;  Este&nbsp;  cabecero de cama&nbsp;  está tapizado en...
        </div>
    </div>
</div>

In my JS, I tried the following but can't get it to work.

elements = document.getElementsByClassName("producto_no_hover");

var array = []

for (var i = 0; i < elements.length; i++) {
    array.push(elements[i].onclick=function(){window.location.href});
    console.log(array);
}

How can I target this onclick href?

Answer 1

Okay, you had several syntax errors, but this codepen should accomplish what you were trying to do, though I don't know why you're putting the array of elements into a second array.

 elements = document.getElementsByClassName("product_no_hover"); var array = []; for (var i = 0; i < elements.length; i++) { elements[i].onclick= function(){ window.location.href = "http://stackoverflow.com/questions/28199052/is-it-possible-to-get-a-href-inside-an-onclick"; }; array.push(elements[i]); } 

 <div class="product_no_hover">Lorem Ipsum</div> <div class="product_no_hover">Lorem Ipsum</div> <div class="product_no_hover">Lorem Ipsum</div> <div class="product_no_hover">Lorem Ipsum</div> 

(the code doesn't work on Codepen, because Stackoverflow can't be loaded into an iframe.)

But I want to ask why you're doing this in this manner. Using JavaScript for redirection is not recommended when you can use an anchor tag instead. Is there any reason this has to be a JavaScript redirect? Why can't you just switch to anchor tags and add the href in the html, or switch to anchor tags and then add the href with JS, if that's somehow better?

Answer 2

You can do this by converting function body toString and then get needed content using substring for example:

var elements = document.getElementsByClassName("producto_no_hover");

var array = []

for (var i = 0; i < elements.length; i++) {
    var functionBody = elements[i].onclick.toString();
    array.push(functionBody.substring( functionBody.indexOf("='") + 2, functionBody.lastIndexOf("'") ));
    console.log(array); // will return ["http://kenayhome.com/6279-dixon-cabecero-tapizado.html"]
}

indexOf and lastIndexOf will return indexes of search keywords, in this case we will strip everything between

='..your url..'
^^            ^

jsFiddle demo