JavaScript function works incorrectly

Question

I have got 2 js functions and in a function show I want to get the index of the current visible element, but it always alerts 0. It doesn't seem to check, if function navigate_right() has changed the ids of the p elements or not.So how can I modify it so that it runs properly?

<html>
    <style type="text/css">
        p {
            border:1px solid black;
            width:100px;
            height:30px;
            display:none;
        }
    </style>

    <p style="display:block" id="p">some text1</p>
    <p>some text2</p>
    <p>some text3</p>
    <p>some text4</p>
    <p>some text5</p>
    <input type="button" value="left" onclick="show()" />
    <input type="button" value="right" onclick="navigate_right()" id="right" />

    <script>
        var p = document.getElementsByTagName("p");

        function navigate_right() {
            for (var i = 1; i < p.length; i++) {
                if (p[i - 1].style.display == 'block') {
                    p[i].style.display = 'block';
                    p[i - 1].style.display = 'none';
                    return;
                }
            }
        }

        function show() {
            var c = document.getElementsByTagName("p");
            var t;
            for (var i = 0; i < p.length; i++) {
                if (c[i].id = "vis") {
                    t = i;
                    alert(t);
                    return;
                }
            }
        }
    </script>    
</html>

EDIT! there should be alert t;t is for index of a current paragraph visible NOW IT WORKS!I have corrected some silly mistakes. But thanx everyone for help anyway

var p = document.getElementsByTagName("p");
function navigate_right() {
    for(var i = 1; i <p.length; i++){ 
        if(p[i-1].style.display == 'block') {
            p[i].style.display = 'block';
            p[i].id = "vis";
            p[i-1].style.display ='none';
            p[i-1].removeAttribute("id");
            return;
        }
    }
}
function show(){
    var c = document.getElementsByTagName("p");
    var t;
    for (var i = 0; i < p.length; i++) {
        if(c[i].id == "vis") { 
            t = i;
            alert(t);
            return;
        }
    }
}

That is not the best way to check if an element is visible anyway. Use `if (c[i].offsetWidth > 0 && c[i].offsetHeight > 0)` instead. A couple of good answers can be found in this question: http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript — marlenunez, Jun 08 '13 at 19:17

score 0 · Answer 1 · answered Jun 08 '13 at 18:52

0

c[i].id = "vis" is setting the ID. The assignment evaluates to true so the code always goes into the if body first time round the loop. That's why i is always 0.

You want c[i].id === "vis" (or at least c[i].id == "vis").

answered Jun 08 '13 at 18:52

Matthew Strawbridge

19,940
10
72
93

But there is no `id` called `"vis"` in the code and you don't get a `"vis" id` added when something is visible. – marlenunez Jun 08 '13 at 18:54
but i have changed "=" to "==" and the function doesn't alert anything yet – Andriy Haydash Jun 08 '13 at 18:56
@marlenunez `c[i]` is an object, so this code sets the `id` property for that object – Matthew Strawbridge Jun 08 '13 at 18:57
@user2167174 You don't have any paragraphs with an id of "vis", so it's not finding any. If you change it to `c[i].id === "p"` then you'll get 0, the invisible first node. You could do `c[i].id !== "p"` instead to get the first paragraph without an id of "p", which would return 1. – Matthew Strawbridge Jun 08 '13 at 19:00

JavaScript function works incorrectly

1 Answers1