Jhon122 Jhon122 - 7 months ago 13
HTML Question

change css using JS

I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?



body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}

.buttonSize1{
font-size: 3px;
}

.buttonsize2{
font-size: 26px;
}

.buttonsize3{
font-size: 45px;
}

.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}

p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;

}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}

.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;

}

table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}

<!doctype html>
<html>
<head>

<link rel="stylesheet" href="7Global.css"/>



<title> CSGO </title>

<script>

function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}

function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}

function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}


</script>
</head>
<body>

<table class = "fixed opac">
<tr>
<td><a href="Index.html">Home</a> </td>

</tr>

<tr>
<td><a href="3Maps.html">Maps</a> </td>

</tr>
<tr>
<td><a href="4CT.html">Counter <br/> Terrorists</a> </td>

</tr>
<tr>
<td><a href="5T.html">Terrorists</a> </td>

</tr>
<tr>
<td><a href="6About.html">About</a> </td>

</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>

</tr>
</table>

<br/>
<br/>
<br/>

<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack

</td>
</tr>
</table>

<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>

What’s new? Visit the page below for details!
</td>
</tr>
</table>

<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>

</body>
</html>




Answer

Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).

function textSizeS(){
  document.getElementById("MaintblWrapper").style.fontSize = "3px";
}

function textSizeM(){
  document.getElementById("MaintblWrapper").style.fontSize = "26px";
}

function textSizeL(){
  document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
     background-image: url("back2.jpg");
     background-size: 100% 100%;
 } 

 .buttonSize1{
    font-size: 3px;
 }
 
 .buttonsize2{
   font-size: 26px;
 }
 
 .buttonsize3{
   font-size: 45px;
 }
 
.fixed {
    position: fixed;
    Top: 100px;
    Left: 0px;
    width: 150px;
    border: #0E6B5B 3px solid;
    background-color: #FF9933;
}

p {
    padding-left: 100px;
}
td {
    padding-top: 10px;
    padding-bottom: 50px;
    text-align: center;
    font-family: "Lucida Console", Monaco, monospace;
    
}
.opac {
     opacity: 0.5;
     filter: alpha(opacity=10); /* For IE8 and earlier */
 } 
 
 .opac:hover {
     opacity: 1.0;
     filter: alpha(opacity=100); /* For IE8 and earlier */
 } 
 .MainTable{
     border: #0E6B5B 3px solid;
	 background-color: #FF9933;
    width: 50%;
    padding-top: 10px;
    padding-left: 100px;
	padding-right: 100px;
	
 }
 
 table.center {
    width:70%; 
    margin-left:15%; 
    margin-right:15%;
  }
<table class = "fixed opac">
  <tr>
    <td><a href="Index.html">Home</a> </td>
    
  </tr>

  <tr>
    <td><a href="3Maps.html">Maps</a> </td>
    
  </tr>
  <tr>
    <td><a href="4CT.html">Counter <br/> Terrorists</a> </td>
    
  </tr>
  <tr>
    <td><a href="5T.html">Terrorists</a> </td>
  
  </tr>
  <tr>
    <td><a href="6About.html">About</a> </td>
	
   </tr> 
   <tr>
    <td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
	
  </tr>
</table>

<br/>
<br/>
<br/>

<div id = "MaintblWrapper">
  
  <table class = "MainTable center">
    <td>  CS:GO’s Next Major </td>
    <tr>
      <td>
        Europe Region – Hosted by DreamHack

      </td>
    </tr>
  </table>

  <table class = "MainTable center">
    <td> Operation Wildfi </td>
    <tr>
      <td>

        What’s new? Visit the page below for details!
      </td>
    </tr>
  </table>  

  <table class = "MainTable center">
    <td>  We made some adjustments to rifles recently... </td>
    <tr>
      <td>
        nCS:GO. M
      </td>
    </tr>
  </table>  

</div>