get element by id value and font

[s_avinash_s]

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?

 

[dsonesuk]

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.

[s_avinash_s]

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?

[dsonesuk]

var currentUsedFont = document.getElementById("demo2").style.fontsize;
document.getElementById("other_demo").style.fontsize = currentUsedFont;

 

[s_avinash_s]

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

[dsonesuk]

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.

[s_avinash_s]

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>

 

[dsonesuk]

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;

[s_avinash_s]

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 September 28, 2018 by s_avinash_s

[dsonesuk]

Remove quotes and parentheses ,

setInterval(abc_val, 1000);

And yes! it does help if you call an existing function.

[s_avinash_s]

Hi 

Yes ,after removing quotes and parenthesis also.It does not help.

How to make it work...

[dsonesuk]

It does work i just tested it! it shows contents of text file, and shows the size of the font used to show that content.

[s_avinash_s]

Hi 

But for me , nothing is getting displayed.

Not getting any value

[dsonesuk]

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 October 1, 2018 by dsonesuk

[s_avinash_s]

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

[dsonesuk]

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.