JavaScript functions do not work within the HTML code

I am currently working on my debut website and I'm facing an issue with the JavaScript file not functioning properly.

Is there a chance you can help me troubleshoot this? I'm still in the learning stages of programming.

This is the HTML content:

<head>  

        <script type="text/javascript"> 

        </script>

        <meta charset="utf-8" />
        <title>Makoto Designer</title>

        <link rel="stylesheet" href="style.css" type="text/css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="javas.js"></script>

</head>

<body>  
        <header>
                <div id="hed">
                <img src="/img/logo_okr.png" class="logo">
                <div class="biale"></div>
                <div class="czarne"></div>
                <img src="/img/md.png" class="md">
                </div>
        </header>
</body>

This is the CSS code:

.logo {
    display: inline-block;
    position: absolute;
    width: 155px;
    height: 155px;
    left: 50px;
    top: 50px;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.4));
    cursor: pointer;
    object-fit: cover;
    z-index: 3;
}

.md {
    display: inline-block;
    position: absolute;
    width: 532px;
    height: 190px;
    left: 230px;
    top: 18px;
    filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.4));
}


.czarne {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000099;
    z-index: 1;
}


.biale {
    position: absolute;
    background-color: #FFFFFF;
    left: 125px;
    top: 55px;
    width: 1px;
    height: 140px;
    z-index: 2;
    transition: 2s;
    transition-timing-function: ease-out;
}   

.biale.on {
    position: absolute;
    background-color: #FFFFFF;
    left: 125px;
    top: 50px;
    width: 650px;
    height: 155px;
    z-index: 2;
    border-bottom-right-radius: 75px;
    border-top-right-radius: 75px;
    filter: drop-shadow(0px 7px 10px #00000066);
}

This is the JavaScript code causing the issue:

function handleClicks() {
    var logo = $(".logo"),
        biale = $(".biale"),
        czarne = $(".czarne"),

        var menu = {
        open: () => {
            biale.addCalss("active");
            czarne.fadeTo("fast", 1, () => czarne.show());
        },
        close: () => {
            biale.removeClass("active");
            czarne.fadeTo("fast", 0, () => czarne.hide());
        }
        };

        logo.click(() => menu.open());
        czarne.click(() => {
            menu.close();
        });

}

addEventListener('DOMContentLoaded', () => {
    let biale = $(".biale")[0]
    let logo = $(".logo")[0]
    let toggle = false
    logo.addEventListener('clock', () => {
        toggle = !toggle
        biale.className = toggle ? 'on' : ""
    })
})

The main issue I'm encountering is getting the biale element to slide behind the logo before hiding. But upon clicking the logo, nothing seems to happen. Why could this functionality be failing?

mehh

javascripthtmlcss

Answer №1

Make sure to place your <script> at the bottom of the body tag instead of in the head section. Remember to also add a semicolon after czarne = $(".czarne"); instead of a comma ,.

Answer №2

To update your CSS code, replace .biale.on with .biale.active

If you need assistance with your HTML file, check out this resource: https://www.w3schools.com/html/html5_intro.asp

Here are some modifications to consider:

  1. Include a doctype declaration
  2. Delete the empty JavaScript script in the head section for better organization. Your JavaScript code should be in the javas.js file.

This is how your HTML code could be structured:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Makoto Designer</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="javas.js"></script>
  </head>
  <body>
    <header>
      <div id="hed">
        <img src="/img/logo_okr.png" class="logo" />
        <div class="biale"></div>
        <div class="czarne"></div>
        <img src="/img/md.png" class="md">
      </div>
    </header>
  </body>
</html>

In your javas.js file, consider implementing these changes:

  1. Remove the trailing comma at the end of the last variable declaration. In fact, I've simplified it below.
  2. Correct the typo in addClass function.
  3. You might not need the addEventListener method. jQuery provides a document ready feature that can call your handleClicks function upon load to set up the fades.

Here's an example code snippet:

function handleClicks() {
  var logo = $(".logo");
  var biale = $(".biale");
  var czarne = $(".czarne");
  var menu = {
      open: () => {
          biale.addClass("active");
          czarne.fadeTo("fast", 1, () => czarne.show());
      },
      close: () => {
          biale.removeClass("active");
          czarne.fadeTo("fast", 0, () => czarne.hide());
      }
  };

  logo.click(() => menu.open());
  czarne.click(() => {
        menu.close();
  });
}
$(document).ready(function(){
  handleClicks();
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting a blob to base64 and then back to a blob in Node.js may result in varying sizes between the two

I am currently implementing this code in a Node.js application. I have a blob that I am converting to a base64 string and then back to a blob using the following method: // Converting Blob to base64 string via Buffer const buffer = Buffer.from(await myBlob ...

javascriptnode.jsstringblobbuffer

Creating dynamic HTML table rows with data from a JSON object

Query: In search of a Jquery or JavaScript solution for generating dynamic table rows with colspan using the JSON structure provided below. I am encountering difficulties in creating the necessary rows and have attempted several approaches without success ...

javascriptjqueryhtmljson

Is there a way to allow scrolling in only one direction using CSS?

I am facing an issue with resizing elements within a list. The requirement is that when the elements are resized, they should overflow the container only in the x direction. There must not be any scrolling in the x direction, but scrolling should be allowe ...

htmlcssscroll

Troubleshooting problem with Ajax Calendar Extender

I have a text box where I need to save the chosen date from a calendar. To achieve this, I am using an AJAX calendar extender and setting the target control property to the textbox ID. However, when I click on a button on the same page, I lose the selected ...

javascriptasp.net.netajaxajaxcontroltoolkit

"Twice the loading of Meteor templates: once with an undefined collection, and once with it

After searching various resources for solutions to my issue, I stumbled upon this helpful and . Both of these links provided valuable insights. The issue I'm facing is that one of my templates is loading twice - first with the collection undefined, ...

javascriptmongodbmeteormeteor-blaze

Using JQuery's $.ajax() method to send a post request and pass data to invoke a specific method in

I'm currently in the process of learning JQuery and encountering some challenges with utilizing the $.ajax() function. My goal is to send data to a controller for processing. During my debugging of the JQuery, it seems that the ajax call isn't b ...

javascriptjqueryajax

Javascript continuously swaps out text from distinct strings in a loop

I wrote a loop to split a string and search for certain text to replace it with another string. Here is an example of what I have done: function replaceStr(str, find, replace) { for (var i = 0; i < find.length; i++) { str = str.replace(new RegE ...

javascriptloopssplitstr-replace

Issue with undefined bindingContext.$data in IE9 on knockout binding handler

I'm attempting to create a unique binding handler that applies role-based access to fields on a page. This custom handler uses the values of other observables from the viewModel to enable or disable input controls based on certain conditions. However ...

javascriptjqueryknockout.jsknockout-3.0

ng-class will not activate a custom directive

I have developed a custom AngularJS directive that should work on elements with the specified class name .collapse. However, when I apply this class using Angular's ng-class directive, the custom collapse directive does not get activated. Here is a ...

javascriptangularjsangular-directive

Tips for enhancing the fluidity of animations after removing an item from a list

I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...

javascriptjquerycss

What is the proper way to employ if and else if statements within Angular2?

Here's a question that has been duplicated on my How to utilize *ngIf else in Angular? post! ...

javascriptangular

Leverage React Context beyond the confines of a React component

The React Context API has impressed me, but I often find myself struggling to access it outside of a React component. Everything works smoothly within a React function or class component, but when it comes to fetching a value from the context for tasks lik ...

javascriptreactjsreact-native

Having trouble receiving a JSON array after making an Ajax request

I have read through previous posts on this issue, but I still can't seem to figure it out. Hopefully, someone here can help me solve this problem. My challenge lies in retrieving an array, which I have encoded in json, from a PHP script and passing i ...

javascriptphpajaxjson

Issues arising with shadows in THREE.js

I've been struggling to get shadows to work in this fiddle despite trying various configurations. I've looked at other similar questions, tried all the suggested solutions, but still nothing... My current settings include: this._box.castShadows ...

javascriptthree.js

A Guide to Connecting a JavaScript File to an HTML Page with Express and Node.js

Struggling with integrating my JavaScript file into my simple NodeJS app. Traditional methods like placing the script in the header doesn't seem to work with Node. I've attempted using sendFile and other approaches, but none have been successful ...

javascripthtmlnode.js

Show the current Date and Time dynamically using only one line of JavaScript code

After running this command, I encountered an issue: $("#dateTime").text(new Date().toLocaleString()); The result displayed was 2/21/2020, 10:29:14 AM To make the time increase every second, I attempted this code: setInterval($("#dateTime").text(new Dat ...

javascriptjquerydatetime

Issues with passing information from a child component to a parent component in a

Currently, I am developing a guessing game that involves questions and selection logic embedded in a component known as Questions. However, I am facing issues with App not being able to read the Questions code correctly. My objective is to have the state i ...

javascriptreactjsecmascript-6components

Leveraging JQuery for form submission

My webpage contains a form with the following structure: <form action="/" method="post"> <select id="SelectedMonth" name="SelectedMonth"> <option>7/1/2017</option> <option>6/1/2017</option> </select> </form> ...

javascriptjqueryasp.net-mvcforms

Iterate over an array of objects to showcase the property values within an HTML tag using JavaScript

I am a beginner in JavaScript and I am currently working on an exercise. My goal is to iterate through an array of objects within another object, map the index values from one object to the id values in another object, and based on that, perform a certain ...

javascript

Setting the default value to null or 0 in a Select dropdown in Angular 7

There is a select dropdown code that may be hidden in some instances. When the select dropdown is hidden, I want to ensure null or 0 is sent instead of an empty value when saving the form. How can I achieve this? <div class="col-md-4" [hidden]="!cpSe ...

javascriptangular