How to change the css stylesheet in CSS and JS?

function colorChanger() {
  var len = document.getElementById("string").value.length;
  if (len < 50) {
    style1.onclick = swapStyleSheet("first_50.css");
  } else if (len > 50 && len < 100) {
    style1.onclick = swapStyleSheet("second_100.css");
  }
}
function swapStyleSheet(sheet){
    document.getElementById('css_style').setAttribute('href', sheet);
}

JavaScript
​x
 
function colorChanger() {
  var len = document.getElementById("string").value.length;
  if (len < 50) {
    style1.onclick = swapStyleSheet("first_50.css");
  } else if (len > 50 && len < 100) {
    style1.onclick = swapStyleSheet("second_100.css");
  }
}
function swapStyleSheet(sheet){
    document.getElementById('css_style').setAttribute('href', sheet);
}
​
​

This is my code, I want it to change style sheet if the character count is less than 50 and more than 50 and less than 100

My code is not working

Answer

This is my code it is changing the stylesheet.

<html>

<head>
    <title>
        Change Css
    </title>
    <script lang="javascript">
        function colorChanger() {
            var len = document.getElementById("string").value.length;
            if (len < 50) {
                swapStyleSheet("first_50.css");
            } else if (len > 50 && len < 100) {
                swapStyleSheet("second_100.css");
            }
        }

        function swapStyleSheet(strName) {
            document.getElementById("cssChanger").href = strName;
        }
    </script>
    <link href="first_50.css" id="cssChanger" />
</head>

<body>
    <input type="text" id="string" value=""></input>
    <input type="button" id='style1' value="Change Css" onclick="javascritpt:colorChanger();">
</body>

</html> ````

JavaScript
 
<html>
​
<head>
    <title>
        Change Css
    </title>
    <script lang="javascript">
        function colorChanger() {
            var len = document.getElementById("string").value.length;
            if (len < 50) {
                swapStyleSheet("first_50.css");
            } else if (len > 50 && len < 100) {
                swapStyleSheet("second_100.css");
            }
        }
​
        function swapStyleSheet(strName) {
            document.getElementById("cssChanger").href = strName;
        }
    </script>
    <link href="first_50.css" id="cssChanger" />
</head>
​
<body>
    <input type="text" id="string" value=""></input>
    <input type="button" id='style1' value="Change Css" onclick="javascritpt:colorChanger();">
</body>
​
</html> ````
​

Advertisement

Answer