Why the JavaScript function doesn't work?

typeerror is not a function javascript
javascript is not a function
uncaught typeerror is not a function javascript
how to solve browser compatibility issues in javascript
common javascript functions
common challenges with javascript
javascript cross browser compatibility issues
javascript in different browsers

If you click the button, it should have showed, but it doesn't.

Is any wrong here?

I have written many JavaScript files in this way, and tried many ways like changing the position of JavaScript code anywhere. But all the files I wrote don't work

Thanks in advance!

An instance :

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    .debug {
         display : none;
<div class = "debug">
<button class = "show" onclick = "JavaScript : show();">Show</button>
<script type = "text/JavaScript">
    function show() {
        document.querySelector("debug").style.display = "flex";

Thanks to all of you!

About .querySelector()

The Document method querySelector() returns the first Element within the document that matches the specified selector. [...] The selector is a CSS selector string.

- MDN web docs

You should, therefore, put in your code:


  • You can also select HTML elements by their tags, for example, you want to select the first div:


    document.querySelector("div").style.color = "lightgreen"
    <div>Hello World</div>

    Why Doesn't My javascript work???????, here's my javascript: window.onload = function(){ getGreeting(); }; var getGreeting = function(){ var localDate = new Date().toLocaleDateString(); var  Polyfills use JavaScript or other technologies entirely to build in support for a feature that a browser doesn't support natively. For example, you might use a polyfill like es6-promise to make promises work in browsers where they are not supported natively.

For class selector you need to add a dot (.) e.g. .debug

Also, in HTML, you can simply have onclick as onclick="show();"

function show() {
  document.querySelector(".debug").style.display = "flex";
.debug {
  display: none;
<div class="debug">
<button class="show" onclick="show();">Show</button>

Why doesn't this function return anything? - JavaScript, I'm practicing simple JS functions but don't understand why this function doesn't return area: function rectangleArea(width, height) { let area  JavaScript Enhances Your Web page In all appropriate uses of JavaScript, the purpose of the JavaScript is to enhance the way the web page works and to provide those of your visitors who have JavaScript enabled with a friendlier site than is possible without the JavaScript.

You were not passing class to querySelector. Set ".debug" instead of "debug".

Below is working code:

function show() {
  document.querySelector(".debug").style.display = "flex";
.debug {
  display: none;
<div class="debug">
<button class="show" onclick="JavaScript : show();">Show</button>

What Is JavaScript Used For: Find Out What Can You Do With , is used to create responsive, interactive elements for web pages, enhancing the user experience. A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). Example

queryselectors requires . and # for class and ID selector:


Strange JavaScript Errors and How to Fix Them, in an object, but you typed the name wrong. Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure—a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it.

How to enable JavaScript in your browser and why, (recommended)". Click on the "OK" button to close it. Values can be passed to a function, and the function will return a value. In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

Handling common JavaScript problems, If you want this to work correctly, you need to define a function to add the The console.log() output shows that the superHeroes object doesn't  When i put this javascript code in head then its not called automatically but the c# function not working in head. That's why I asked. This statement itself contains the answer to the question.

TypeError: "x" is not a function, The JavaScript exception "is not a function" occurs when there was an TypeError: Object doesn't support property or method {x} (Edge)  Any idea of why the function would work with the inline JavaScript but not with the imported JavaScript? I would rather have my code defined in an external file, so getting it to work that way would be ideal.

  • @VicJordan this question has nothing to do with jQuery's selectors.
  • .querySelector only returns one Element, not all. That's what .querySelectorAll is there for, giving you an array(-like structure) to then iterate or forEach over.
  • Of course, you can use querySelectorAll, then you will need to unwrap the NodeList of HTMLElement objects before applying Array's methods. But here OP didn't mention having multiple .show elements.
  • I know, it's just that you say "you want to select all div" instead of "the first".