Remove From My Forums

Javascript code produce error in web developer express version 2010

Question
0

Sign in to vote

User1909155429 posted

My javascript code that i am using,taken from the Schools tutorial website always produce errors when run on my system. I am operating VSDE 2010. I wonder if the javascript library is out of date? Is it possible to update javascript and download to VSDE?

Monday, May 25, 2020 10:34 PM

Answers

0

Sign in to vote
User409696431 posted

I assume you are testing using IE (or your IDE is that old). Always test in multiple browsers so you know if you are dealing with a browser-specific problem. The code works in Firefox, Chrome, Opera, and Edge.

If you are just playing around and learning, you now know that IE doesn't support that.

If you are really needing to support the latest versions of IE, see this link for how to do it: https://stackoverflow.com/questions/37304037/why-my-code-dont-working-in-ie11

If you want a newer IDE, use Visual Studio Community edition, which is free for many (a single developer qualifies).
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, May 26, 2020 1:22 PM

User1535942433 posted

Hi peterthegreat,

As far as I think, the javascript syntax is related with the Browser. Event.target.matches doesn't exist in Internet Explorer.So if you want to use Event.target.matches,you could use google or firefox.If you still want to use IE Browser,you must use event.target.msMatchesSelector.

Just like this,it works fine in IE Browser.

<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .dropbtn {
            background-color: #3498DB;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

            .dropbtn:hover, .dropbtn:focus {
                background-color: #2980B9;
            }

        .dropdown {
            ;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            ;
            background-color: #f1f1f1;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }

        .dropdown a:hover {
            background-color: #ddd;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <h2>Clickable Dropdown</h2>
        <p>Click on the button to open the dropdown menu.</p>

        <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Dropdown</button>
            <div id="myDropdown" class="dropdown-content">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#contact">Contact</a>
            </div>
        </div>

        <script>
            /* When the user clicks on the button, 
            toggle between hiding and showing the dropdown content */
            function myFunction() {
                document.getElementById("myDropdown").classList.toggle("show");
            }

            // Close the dropdown if the user clicks outside of it
            window.onclick = function (event) {
                event.preventDefault();
                if (!event.target.msMatchesSelector('.dropbtn')) {
                    var dropdowns = document.getElementsByClassName("dropdown-content");
                    var i;
                    for (i = 0; i < dropdowns.length; i++) {
                        var openDropdown = dropdowns[i];
                        if (openDropdown.classList.contains('show')) {
                            openDropdown.classList.remove('show');
                        }
                    }
                }
            }
        </script>
    </form>
</body>

Best regards,

Yijing Sun

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, June 9, 2020 8:44 AM

All replies

0

Sign in to vote

User409696431 posted

What JavaScript library are you talking about? It seems unrelated to your question, if you are using a plain old JavaScript you found on a Schools tutorial, it would not involve a JavaScript library. As to why it produces errors - what JavaScript, and what errors does it produce and how to you see them? Does the JavaScript work in spite of the stated errors? (JavaScript runs in the browser and is independent of VS.)

Tuesday, May 26, 2020 12:43 AM
0

Sign in to vote

User1535942433 posted

Hi peterthegreat,

Accroding to your description,I suggest you could make sure that you have use javascript correctly.

Besides,What the questions you have?Could you post your codes,problems or the articles you learned to us?It will help us to solve your problems.

Best regards,

Yijing Sun

Tuesday, May 26, 2020 5:20 AM

User1909155429 posted

Error: Object doesn't support property or method 'matches'

// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

Complete code

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  ;
  display: inline-block;
}

.dropdown-content {
  display: none;
  ;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function (event) {
        if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
</script>

</body>
</html>

Tuesday, May 26, 2020 1:03 PM

0

Sign in to vote

User1909155429 posted

I was not sure if my version of VSDE would recognise new javascript code? and in which event is it possible to update ?

See code examples in other post,thank you.

Tuesday, May 26, 2020 1:09 PM
0

Sign in to vote
User409696431 posted

I assume you are testing using IE (or your IDE is that old). Always test in multiple browsers so you know if you are dealing with a browser-specific problem. The code works in Firefox, Chrome, Opera, and Edge.

If you are just playing around and learning, you now know that IE doesn't support that.

If you are really needing to support the latest versions of IE, see this link for how to do it: https://stackoverflow.com/questions/37304037/why-my-code-dont-working-in-ie11

If you want a newer IDE, use Visual Studio Community edition, which is free for many (a single developer qualifies).
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, May 26, 2020 1:22 PM
0

Sign in to vote

User1909155429 posted

I never realised about the javascript is dependant on version of IE. Does IDE version not matter or does that need frequently updating to accommodate latest Javascript developments?

Thank you

Monday, June 8, 2020 1:57 PM
0

Sign in to vote

User409696431 posted

The IDE might have intellisense that is outdated for more recent JavaScript, but that doesn't matter. What matters is if the JavaScript works in the browsers you support.

JavaScript is not "dependent on the version of IE", JavaScript support in browsers can vary by browser and the version of the browser.

Monday, June 8, 2020 3:34 PM