We're facing some technical difficulties with the form for the school project. Furthermore, I need to ensure that the answers are

Upon inspection, it seems that the HTML code is fine, but there appears to be an issue with the JavaScript. I also need to store the answers in an array, which is a task for later.

<form>
    <fieldset>
        <legend>Content:</legend>
            <label><input type="radio" name="content" value="bad"/>bad</label>
            <label><input type="radio" name="content" value="average"/> average</label>
            <label><input type="radio" name="content" value="good"/> good</label>
            <label><input type="radio" name="content" value="excellent"/> excellent</label>
    </fieldset>
    <br>
    <fieldset>
            <legend>Style:</legend><h5>the site needs more:</h5>
            <label2><input type="checkbox" name="style" value="color"/>color</label2>
            <label2><input type="checkbox" name="style" value="whitespace"/> 
white space</label2>
            <label2><input type="checkbox" name="style" value="Texture"/> Texture</label2>
            <label2><input type="checkbox" name="style" value="Icons"/> Icons</label2>
    </fieldset>
    <br>
    <fieldset>
            <legend>Usability:</legend>  
            <label><input type="radio" name="usability" value="bad"/> bad</label>
            <label><input type="radio" name="usability" value="average"/> average</label>
            <label><input type="radio" name="usability" value="good"/> good</label>
            <label><input type="radio" name="usability" value="excellent"/> excellent</label>
    </fieldset>
    <br>
    <fieldset>
            <legend>Theme:</legend>
            <label><input type="radio" name="Theme" value="bad"/> bad</label>
            <label><input type="radio" name="Theme" value="average"/> average</label>
            <label><input type="radio" name="Theme" value="good"/> good</label>
            <label><input type="radio" name="Theme" value="excellent"/> excellent</label>
    </fieldset>
    <br>   
    <fieldset>
            <legend>Optimization</legend>
            <label><input type="radio" name="Optimization" value="bad"/> bad</label>
            <label><input type="radio" name="Optimization" value="average"/> average</label>
            <label><input type="radio" name="Optimization" value="good"/> good</label>
      <label><input type="radio" name="Optimization" value="excellent"/> excellent</label>
    </fieldset>        
    <input type="button" value="Submit">
</form>

I suspect that the event listener is malfunctioning due to a potential error in the check function. As I continue learning, I am gradually grasping the fundamentals.

var contentFlag = false, styleFlag = false, usabilityFlag = false, themeFlag = optimizationFlag = false;

var btnSubmit = document.querySelector("input[type='button']");

btnSubmit.addEventListener("click", check);

function check(){

    var messages = [];
    messages.push(checkContent());  
    messages.push(checkStyle());
    messages.push(checkUsability());
    messages.push(checkTheme());
    messages.push(checkOptimization());

    if (contentFlag && styleFlag && usabilityFlag && themeFlag && optimizationFlag){

        var content = document.querySelector("input[name='content']:checked").value;
              
        var styleFields = Array.prototype.slice.call(document.querySelectorAll("input[name='style']:checked"));
              
        var style = styleFields.map(function(item){
            return item.value;
        });

        style = style.join(", ");
            
        var usability = document.querySelector("input[name='usability']:checked").value;
        var theme = document.querySelector("input[name='theme']:checked").value;
        var optimization = document.querySelector("input[name='optimization']:checked").value;

        alert("Thank you for your input");
    } else {
        var message = messages.join(", ");
        alert("You haven't selected: " + message);
    }
} 

function checkContent(){
    if(document.querySelector("input[name='content']:checked")){
        contentFlag = true;
    } else { 
        contentFlag = false; 
        return "content";
    }
}

function checkStyle(){
    if(document.querySelector("input[name='style']:checked")){
        styleFlag = true;
    } else { 
        styleFlag = false;
        return "style";
    }
}

function checkUsability(){
    if (document.querySelector("input[name='usability']:checked")){
        usabilityFlag = true;
    } else {
        usabilityFlag = false;
        return "usability";
    }
}

function checkTheme(){
    if (document.querySelector("input[name='theme']:checked")){
        themeFlag = true;
    } else { 
        themeFlag = false;
        return "theme";
    }

function checkOptimization(){
    if (document.querySelector("input[name='optimizationt']:checked")){
        optimizationFlag = true;
    } else { 
        optimizationFlag = false;
        return "optimization";
    }
}
}

Answer №1

Upon executing the provided javascript code snippet, an error message is returned:

"message": "Uncaught TypeError: Cannot read property 'addEventListener' of null",

This error indicates that the variable btnSubmit does not refer to the submit button.

document.querySelector("input[type='button']");

If there is only one input with type button in your document, this will return a valid element. Are there additional inputs outside of the provided HTML? One solution could be assigning it an id, for example id="btn-submit", and then using:

var btnSubmit = document.querySelector("#btn-submit")

Alternatively, you can use:

var btnSubmit = document.getElementById("btn-submit")

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

Incorporating .txt files into a static webpage using only HTML and JavaScript

Exploring the realm of web page creation for the first time has left me in need of some guidance. I have successfully added an upload feature for text files on my web page, but I am struggling to embed a text file directly into the page source. With Java s ...

Obtain the final output of a specific class utilizing jQuery

My HTML table structure is as follows: <tbody id="letter-list"> <?php $index = 0; foreach($letters as $letter) { $index++; ?> <tr id="letter-<?php echo $index; ?>"> <td><?php echo $l ...

$q.all - successfully resolving some HTTP requests while encountering errors on others

I encountered a coding scenario like this angular.forEach(config.tvshows.shows, function(show) { promises.push($http.get('http://epguides.frecar.no/show/' + show.replace(/\s|\./g, '') + '/next/')); }); re ...

Is the unit-converts npm package compatible with the website https://unpkg.com?

Having issues importing the npm package 'convert-units' using unpkg, I attempted the following method: <script src="unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02616d6c746770762f776c6b767142302c31 ...

Triggering a system context menu through a longpress gesture on the MobileFirst iOS app is a

After experimenting with our MobileFirst iOS app, I noticed that if you hold down on any anchor links for more than 2 or 3 seconds, iOS will bring up a built-in menu displaying the internal path of the current HTML page. I'm unsure whether this behav ...

I'm struggling to center my navigation bar and adjust its size properly, causing the page to overflow

I am facing some issues with my navigation bar. I am unable to adjust its size or position it at the center of the page. Additionally, despite setting the body width and height to 100vw and 100vh respectively, I am able to scroll both vertically and horizo ...

Is there a way to execute a function after EACH user interaction?

I am in the process of developing a React Native kiosk application for an Android tablet that will be mounted on a wall. The main requirement is to include a "screen saver" feature, where if the user does not interact with the screen for 30 seconds, it wil ...

What is the best way to upload a file without finalizing the form submission?

I have been working on a task to upload a file using ajax and php without refreshing the page when submitting. My code seems to be functioning well and alerts a valid message when I use the preg_match function. However, when I include the rest of the valid ...

What is the process for retrieving MySQLi data ordered by an array's values?

I have set up an array to retrieve information from a MySQL server. $ids = array(249853, 245549, 249851, 245552, 245551, 249854, 245550, 282445, 261747, 249852, 222398, 248072, 248390, 272473, 219212, 234140, 249815, 241089, 271940, 274940); $sorted_ids = ...

Intel XDK problem with HTML5/CSS3 footers overlapping headers in my project

I am in the process of developing an application using drag and drop features from the Intel XDK/App Designer. The main concept behind this app is to provide users with basic tutorials and incorporate geolocation services. My approach involved following th ...

Is it possible to showcase multiple items in react JS based on logical operators?

How can I update the navigation bar to display different menu options based on the user's login status? When a user is logged in, the "Logout", "Add Product", and "Manage Inventory" options should be shown. If a user is not logged in, only the "Home" ...

Finding the difference or sum within an array to identify the two numbers that produce a new array

In order to clarify, I am looking for a method to identify the two smallest numbers in a sorted array that will result in a specific number when subtracted. The process can be broken down into the following steps: Iterate through the array and designate ...

Is it better to compare columns, arrays, and lists using SQL, Numpy, or Python lists? Could Intertools be a faster and more efficient option?

My SQL database consists of two tables: Table tModel has 9 columns (ID, Date N1, N2, N3, N4, N5, N6, Flag) and a staggering 300 million rows Table tPairAP has 3 columns (ID, N1, N2) and only 750 rows The task at hand is to find rows in tModel where any ...

Transferring data between two "Data" elements using Jquery Datatable

Utilizing the JQuery datatable, I have made the first column of my table clickable, which is labeled as RequestNo. Here's the code snippet: "ajax": { "url": "/Request/Search/LoadData", "type": "POST", "datatype": "j ...

Tips for altering value by selecting radio buttons

Currently, I am in the process of developing a website using Adobe Dreamweaver with php. The site includes three buttons that serve as payment method options and act as continue buttons. My goal is to have the selected radio button (I agree button) add a s ...

The function dataTable is not recognized as a valid command

I am encountering an issue while attempting to utilize the datatables plugin. Whenever I call the function dataTable(), I receive an error. Here is a snippet of my code: @Scripts.Render("~/Scripts/DataTables-1.9.4/media/js/jquery.js") @Scripts.Render("~/S ...

The Parallax effect reference hook does not seem to be functioning properly with components in NextJs

I'm attempting to implement the useParallax hook on an element within my JavaScript file. My setup involves NextJs, ReactJs, and styled components. Here is how I integrated the hook: Mainland.js import React, { useEffect, useRef } from 'react&ap ...

What is the best approach to integrating AJAX calls with promises in the Angular framework?

I'm facing an issue while using Angular promises with the $q service in my controller. Here's the code snippet: var myController = function ($scope, myService) { $scope.doSomething = function (c, $event) { $event.preventDefault(); ...

Ajax encounters difficulty in parsing JSON data

I have thoroughly researched similar questions on this topic, but none of them have provided a solution to my problem. My current challenge involves parsing JSON data that is being returned from a PHP script running on the server. I have already used JSON ...

The argument 'TabsCtrl1' is throwing an error as it is not recognized as a valid function and is showing as

I have encountered a problem with my controller, and I am seeing the following error message: Error: [ng:areq] Argument 'TabsCtrl1' is not a function, got undefined http://errors.angularjs.org/1.3.0-beta.11/ng/areq?p0=TabsCtrl1&p1=not%20a%20 ...