Html Jquery Help Whats Wrong-CodePudding

I want a Boolean for a button stat but i cant what's wrong in my code? `

<button id="read-more"  onclick="Openreadmore()"> Read More </button>

    <script>
        var status = false;
        var myopacity = 0;

        function Openreadmore() {

            if (status == false) {
                document.getElementById("text-more").style.display = "none";
                document.getElementById("text-more").classList.remove("is-active");
                document.getElementById("small-text").style.display = "block";
                document.getElementById("read-more").textContent = 'Read More';
                status == true;
            }
            if (status == true) {
                document.getElementById("text-more").style.display = "block";
                MycomeFadeFunction();
                document.getElementById("text-more").classList.toggle("is-active");
                document.getElementById("small-text").style.display = "none";
                status == false;
                document.getElementById("read-more").textContent = 'Close Paragraph';
            }
        }


        function MycomeFadeFunction() {
            if (myopacity < 1) {
                myopacity  = .075;
                setTimeout(function() {
                    MycomeFadeFunction()
                }, 100);
            }
            document.getElementById('text-more').style.opacity = myopacity;
        }
    </script>

` I wanted to hide some divs when the boolean is true or false, there is a var status = false; I set it as default value then checked with if but things didn't work out

CodePudding user response：

change var type to let type and check

 //var status = false;
 //var myopacity = 0;
 let status = false;
 let myopacity = 0;

CodePudding user response：

The issue seems to be that your var status takes a string value instead of a boolean.

var status = false;

function Openreadmore() {
    if (status == "false") {
        status="true";
        document.getElementById("textDiv").style.color= "red";
        /*Your code*/
    }
    else if (status == "true") {

        status = "false";
        document.getElementById("textDiv").style.color= "blue";
        /*Your code*/
    }
}

<button id="btnReadMore"  onclick="Openreadmore()"> Read More </button>

<div id="textDiv">
button changes color of this.
</div>

Something like this in JS code should give your desired result.

CodePudding user response：

You are using the wrong number of ='s when setting the value of status inside the if statement, as i understand you are trying to create some sort of "toggle"

if (status == true) {
                document.getElementById("text-more").style.display = "block";
                MycomeFadeFunction();
                document.getElementById("text-more").classList.toggle("is-active");
                document.getElementById("small-text").style.display = "none";
                //this was status == false previously, which would return a boolean rather than set the value
                status = false; 
                document.getElementById("read-more").textContent = 'Close Paragraph';
            }