Jump to content
s_avinash_s

get element by id value and font

Recommended Posts

Hi

Am getting the value by using 

 document.getElementById("demo2").innerHTML=this.responseText; 

My requirements are:

1.The receiving data from server should  have different font size.

I tried using 

 document.getElementById("demo2").style.fontsize="25px"; 

But i didnt see change in size.

 

2.The value received in "demo2", i need to use in other part of code.I mean other form and div.

How can i do it?

 

Share this post


Link to post
Share on other sites

Anything in css that includes a hyphen 'font-size', background-color' in JavaScript is done as camel case so 'font-size' becomes 'fontSize', background-color' becomes backgroundColor.

Share this post


Link to post
Share on other sites

Hi

Thanks for the reply.I can able to get the font size.

Isit possible to get the  value received in "demo2", to use in other div or form .

i mean like same value received in demo2 to be used for other part of code.

How can i do it?

Share this post


Link to post
Share on other sites
var currentUsedFont = document.getElementById("demo2").style.fontsize;
document.getElementById("other_demo").style.fontsize = currentUsedFont;

 

Share this post


Link to post
Share on other sites

Hi

I have tried like below code.

Am not getting the value.

In default case also, am not getting the value.

<p  id="demo2"></p>
     
    <script>
    function abc_val() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) { 
	        
          document.getElementById("demo2").innerHTML=this.responseText; 
          var currentUsedFont = document.getElementById("demo2").innerHTML;
         
        }
      };
    xhttp.open("GET", "abc.txt", true);
    xhttp.send();
    }

    setInterval("abc_val()", 1000);
    </script>




Other code where it is used:

<p  id="new_demo"></p>
    <script>
    function newtext() {
        
        document.getElementById("new_demo").innerHTML=currentUsedFont;
    }

    setInterval("newtext()", 1000);
    </script>

Any thing wrong

 

Please suggest

Share this post


Link to post
Share on other sites

Firstly the original element must have the fontSize applied to it! because you are reading this from style="font-size: 18px" that will be applied "demo2", 'innerHTML" will target the content between '<p id="new_demo">' and '</p>', IS that what you want? if you mean to give it the same font-size, you need to target its style attribute not content.

Using var within the function

var currentUsedFont = document.getElementById("demo2").innerHTML;

means that variable is restricted to the scope of that function, it needs to be defined outside that function so it becomes global, then any function can read/manipulate that variable as long as it does not have a var at the beginning.

Share this post


Link to post
Share on other sites

Hi

 

I have modified like below to make it as global variable.

But still am not getting any data at both sides

        
		<script>
			var   currentUsedFont;
          
          function()
          {
            ....
            ....
            
		  document.getElementById("demo2").innerHTML=this.responseText; 
          document.getElementById("demo2").style.fontSize="25px";
          currentUsedFont = document.getElementById("demo2").style.fontSize;
          }
            
            </script>

other part:

<p  id="new_demo"></p>
    <script>
    function newtext() {
        
       document.getElementById("new_demo").style.fontSize = currentUsedFont;
    }

    setInterval("newtext()", 1000);
    </script>

 

Share this post


Link to post
Share on other sites

The likelihood of the ajax function applying font-size before the newtext function is called everytime is very slim. Remove setInterval for function newtext, and add the function call newtext() under

currentUsedFont = document.getElementById("demo2").style.fontSize;

Share this post


Link to post
Share on other sites

Hi

Changed after currentusedfont.

Still the same issue only

<p  id="demo2"></p>
     
    <script>
    var currentUsedFont;
    function abc_val() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) { 
	        
          document.getElementById("demo2").innerHTML=this.responseText; 
          document.getElementById("demo2").style.fontSize="25px";
          currentUsedFont = document.getElementById("demo2").style.fontSize;
          newtext();
                  
        }
      };
    xhttp.open("GET", "abc.txt", true);
    xhttp.send();
    }

    setInterval("abc_val()", 1000);
    </script>

other part:
<p  id="new_demo"></p>
    <script>
    function newtext() {       
        document.getElementById("new_demo").innerHTML=currentUsedFont;
    }
    </script>

 

Edited by s_avinash_s

Share this post


Link to post
Share on other sites

OH Well! it must only work on my pc and browser then, or it could be something your doing wrong! OR have done something like make the text white on a white background.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Hi

When i remove the below lines

          currentUsedFont = document.getElementById("demo2").style.fontSize;
          newtext();

That time i can get font and contents at original place only.

Is there any problem the way am calling the above 2 lines.

 xhttp.open("GET", "abc.txt", true);

The above argument abc.txt file has no content.it is used as resource to receive at server side and get data from there

Share this post


Link to post
Share on other sites

If the txt file is empty you will get nothing showing in 'demo2' 'demo2 font-size will be changed but nothing will indicate that, because it is empty. If you remove those two lines it must be using black magic to get the font-size and show in 'new_demo', and i definitely can't  help you with that!  because they should get current font-size used for 'demo2' and assign to a variable, and the function will refer to 'demo_new" to insert and show that variable font-size.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×