We Keep Coding

Script not working on first click only on second

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>

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"/>

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>

Javascript does not continue after adding stylesheet to a class

I want to display a div container if the device has a special width. I made a simple if-condition and it is working well.
I wanted to add a second function to my code and the function was not called. After trying out I saw that the code stops after the document.getElementyById-Code.
If the alert("Hello World") is called in the if-condition before the getElementById, it is called. If it is called in the if-condition after the getElementById, it is not called anymore.
Why is the progress stuck there?
The console output:
[Error] TypeError: null is not an object (evaluating 'document.getElementById("whitecontainer").style')
setHeightandWidth (-Link deleted-, line 402)
onresize (-Link deleted-, line 382)
but the object cannot be null, because the style change does work, it is just stuck after doing the resize.
Thanks for help!
function setHeightandWidth() {
var body = document.body,
html = document.documentElement;
var height = (Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight) - 75 - 248);
var width = document.body.clientWidth;
if (width < 1199) {
document.getElementById("whitecontainer").style.display = "none";
alert("Hello World!");
}
if (width >= 1199) {
width = 1140;
document.getElementById("whitecontainer").style.display = "inherit";
}
var white_container = document.getElementById("whitecontainer");
white_container.style.height = height + "px";
white_container.style.width = width + "px";
}

Problem is in this line
document.getElementById("whitecontainer").style.display
javascript is unable to find id "whitecontainer" tat's why it throws an null exception and script breaks

The alert not working probably means that the line before it caused an error.
Do the lines
white_container.style.height = height + "px";
white_container.style.width = width + "px";
Run?
I have a feeling your code fails everytime you use document. XXXXXX
'whitecontainer' is probably not a real element

Detect the Body's Height

I have an Add More Attachments function. Every time I click the button, one more attachment shows up, which causes the page getting longer. I write a syntax to detect the body's height after the attachments show up, but somehow it doesn't work. Please help.
Live Code
HTML
<input type="file" /></div><button id="addNew">Add</button>
<div class="attachField"></div>
JS
var i=0;
$('#addNew').click(
function()
{
if( i < 10)
{
i++;
$('.attachField').append( '<div class="attachFile"><input type="file" /></div>' );
}
$('body').on('load', function()
{
var bodyAfterClick = $(this).contents().height();
alert(bodyAfterClick);
$('body').height(bodyAfterClick);
});
}); //end click

Is this what you wanted?
Body automatically gets longer when you add element to it. It's default behaviour when the element's height is not set.
I can't read the documentation right now but it's obvious that this works only on page load. Please read documentation more properly.
$('body').on('load', function())

as per you code i understand that you need to find the height of body when you append the input
Made some changes to your code
JS Fiddle
var i = 0;
$('#addNew').click(
function () {
if (i < 10) {
i++;
$('.attachField').append('<div class="attachFile"><input type="file" /></div>');
a = $('body').height()
console.log(a)
alert(a)
}
}); //end click

First of all why are you explicitly setting height to the body by $('body').height(bodyAfterClick);?
If you have to detect body height, you can try this -
$(document).height() - $('body').offset().top;
Reference link -
jQuery $("body").height() returns undefined

how to return image size with an onclick event from a href

I want to return image width and height from this a href.
<a id="CloudThumb_id_1" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://www.example.com/598441_l2.jpg'" onclick="return theFunction();" href="http://www.example.com/598441_l2.jpg">
I am testing the theFunction with an alert and its working fine but I am not too sure how to return the height and width?
function theFunction () {
alert('This is a test' );

Well for me this is a sample of what i have done, nothing too fancy with this code, just change the src of the image below and the function will automatically tell you the width and height of your image. i dont know why you have your function returning a value but for me its totally un-necessary. Also, your href link doesn't work
<html>
<head>
<script type="text/javascript">
function theFunction()
{
var width1; var height1;
width1 = document.getElementById("sampleimage").width;
height1 = document.getElementById("sampleimage").height;
document.getElementById("output").innerHTML = "Width = "+width1 + " Height = " + height1;
}
</script>
</head>
<body>
<img src="sample.jpg" id="sampleimage">
<div id="output">Height and Width?</div>
<button type="button" id="samplebutton" onclick="theFunction()">Check</button>
</body>
Hope this helps :)

How to make a function set css width with a JavaScript variable?

I have this code:
...<script>
function handleSize()
{
var setObjectSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setObjectSize + "px";
document.getElementById("spin").style.height=setObjectSize + "px";
}
</script>
</head>
<body>
<section id="spin" onLoad="handleSize()">...
All I am trying to do is to create a function that will set the height and width of the element according to window size using a formula and make sure height and width are the same. I am very new to javascript (almost know nothing about it), so despite there being a ton of example of such questions, and me following them, I can't get this code to work. What am I doing wrong?

The problem that I'm seeing, is that the onload event for the section tag isn't firing. You should add your javascript as a self-executing anonymous function to the end of your body tag and this will work for you.
<body>
<section id="spin" style="border:5px solid black;"></section>
<script>
(function () {
var setWindowSize = window.innerWidth - 600;
document.getElementById("spin").style.width = setWindowSize + "px";
document.getElementById("spin").style.height = setWindowSize + "px";
})();
</script>
</body>
See Here for a demo: http://jsfiddle.net/T7DW6/

You should move onload to the body tag:
<body onLoad="handleSize()">
<section id="spin">...

I would suggest you to use jQuery, that is JavaScript library used world wide. So in order to develop it using jQuery you need to do next
function setElementSize(elId) {
var _w $(window); //to get instance of window
var _el $('#' + elId); //jquery to get instance of element
var _width = _w.width();
var _height = _w.height();
//set width=height
if(_height>_width)
{
_height = _width;
} else { _width = _height; }
_el.css({
width: _width,
height: _height
});
}
//this will execute script when document is loaded.
$(document).ready(function(){
setElementSize('spin');
});
Function above will set width and height of element to match window size. If height > width then it will use width as width & height otherwise it will use height.
I assume that you want to change this automatically if window is resized then do this
$(window).resize(function(){
setElementSize('spin');
});

The onload event occurs when an object has been loaded.
onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
onload is only Supported by the Following HTML Tags:
body, frame, frameset, iframe, img, input type="image", link, script, style
from here: event_onload
then a is may be not the best here (height and weight does not change anything, you should use a div.
In order to know, the one to use, please read this:
what-is-the-difference-between-section-and-div

I try your exam and it works fine. The only thing that i changed was the way that you call the function
function handleSize(){
var setWindowSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setWindowSize + "px";
document.getElementById("spin").style.height=setWindowSize + "px";
}
window.onload = function () {
handleSize();
}
I think that onLoad="handleSize()" have to be onload="handleSize()" but don't use that way because it is not a good practise!

this works for me
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button and watch it grow.</p>
<button id = "myButton" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("myButton");
x.style.width = w + "px";
x.style.height = h + "px";
}
</script>
</body>
</html>