Script not working on first click only on second

Question

I'm new to js and I have this problem

---

I want on click to change a height of one element to width of another element and this code works properly by for some reason I have to click twice, any suggestions how to make it to work on first click?

<script>
var l = document.getElementById("tablinks");

l.onclick = function(){

var w = document.getElementById("img1").offsetWidth;
document.getElementById("beforeafter1").style.height = w + "px";

};

</script>

Answer 1

Try below script.

<script>
//var l = document.getElementById("tablinks");
function doMyTrick(){
    var w = document.getElementById("img1").offsetWidth;
    document.getElementById("beforeafter1").style.height = w + "px";

};
</script>
<input type="button" onclick="javascript:doMyTrick()" value="Submit"/>

Answer 2

The link/button code is missing, but I guess you didn't put return false; to your javascript code:

<a href='#' id="tablinks" onclick='someFunc(3.1415926); return false;'>Click here !</a>