Jump to content

html code to javascript


Peter

Recommended Posts

I am working this out for weeks, now it is time to ask the experts.

 

When I put

<span class='results'></span>

on my website I get output on screen.

 

How is it possible to do this with javascript, how can I replace this code for javascript and put the value in an variable?

 

Link to comment
Share on other sites

So are you trying to output content within the <span> tag? If so, you could use getElementsByClassName() to target the tag. More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

 

You could then use innerHTML to add the content. More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

 

Just keep in mind that getElementsByClassName() returns an array-like object. Here's an example of someone using the function and looping through the results:

http://blog.cjgammon.com/getelementsbyclassname/

Link to comment
Share on other sites

Thank you for your answer, maybe I am doing it wrong but I get not the actualy value off the results.

 

This is my script:

<script type="text/javascript" src="http://americanoldtimers.nl/js/jquery-1.4.2.min.js"></script>



<script>
jQuery(window).resize(function()
{
viewportwidth=window.innerWidth,viewportheight=window.innerHeight;

$('.results').html(viewportwidth);
$('.results2').html(viewportheight);

}
);


</script>

<span class='results'>Width</span>
<BR>
<span class='results2'>Height</span>

<P>

<span class='results'>Width</span>
<BR>
<span class='results2'>Height</span>



<script>
// How can I get the Width and Height here in javascript?
</script>

<script>
// And at the same time the Width and Height here in javascript?
</script

When you risize the screen you get the width and height. You can see the script working at:  http://americanoldtimers.nl/testje.php

Link to comment
Share on other sites

So basically, you're looking to use the width and height in JavaScript...is that correct? If so, the values are already there when the browser window is re-sized.

 

To make the values available to other parts of your JavaScript, you could pass them to a function. Here's a quick example:

<script type="text/javascript" src="http://americanoldtimers.nl/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(window).resize(function() {
    viewportwidth  = window.innerWidth;
    viewportheight = window.innerHeight;
    displayWindowSize(viewportwidth, viewportheight);
});
 
function displayWindowSize(width, height) {
    $('.results').html(width);
    $('.results2').html(height);
}
</script>
<span class='results'>Width</span>
<BR>
<span class='results2'>Height</span>
 
<P>
 
<span class='results'>Width</span>
<BR>
<span class='results2'>Height</span>

Note that you can find more information about JavaScript functions here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

Link to comment
Share on other sites

<script type="text/javascript" src="http://americanoldtimers.nl/AFBLIJVEN/js/jquery-1.4.2.min.js"></script>

<script>
var urladresbalk = "http://americanoldtimers.nl/test16.php";

jQuery(window).resize(function()
{
location.href = (urladresbalk);
}
);

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
document.write('<H1>'+x+' X '+y+'');
</script>

Thank you again for your answer but this wil not work.

 

I made an other script it works always but not on an I-phone. :-(

 

You can find it here?

 

http://americanoldtimers.nl/test16.php

 

Maybe has someone an solution?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.