Javascript code for toggling the visibility of a div element not functioning as expected

This problem is becoming quite frustrating as it appears to be straightforward but still doesn't work.

Inside my document, I have 

<div id ="splashscreen" style="display:block">
    <h3>title</h3>
    <p>text</p>
    <input type="button" value="Start" onClick="splash();" />
</div>`

And in the script section of my document, I have 

function splash() {
    var divSplash = document.getElementById("splashscreen");
    divSplash.style.display = "none";
}

Shouldn't the splash() function be triggered when the Start button is clicked, leading to the display style of my splashscreen div to change to none?

javascriptcss

Answer №1

The issue lies in the usage of language="text/javascript". If you switch to language="javascript", it should work correctly.

My suggestion is to eliminate the language property and opt for type="text/javascript" instead. In case you are working with HTML5, feel free to omit the type property.

<script type="text/javascript"> 
    function startGame() { 
        var divSplash = document.getElementById("splash"); 
        divSplash.style.display = "none"; 
    } 
</script>

Furthermore, the language property is considered obsolete now.

Answer №2

Upon implementing the code exactly as displayed, the error 'divSplash is null' arises. This outcome is predictable - as the div is labeled "spashscreen" while the JS function seeks a div labeled "splashscreen" (note the missing 'l').

After rectifying the typo, the code functions as intended.

Answer №3

Looks like you forgot to use the correct ID :)

Remember, "spashscreen" is not the same as "splashscreen"

Answer №4

Check out the solution on jsfiddle

Here is the HTML code snippet:

<div id="splashscreen" style="display:block">
    <h1>Welcome</h1>
    <p>This is some text</p>
    <button onclick="hideSplash()">Start</button>
</div>

And here is the Javascript function:

function hideSplash() {
    var splash = document.getElementById('splashscreen');
    splash.style.display = "none";
}

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

Why is my return statement in JavaScript Nextjs mapping values twice?

I am running into an issue where my code is displaying the output twice, and I can't seem to figure out why. Any assistance would be greatly appreciated. Here is a link to the current output that I am receiving. I suspect that the problem lies in sett ...

javascriptreactjsnext.jsweb3js

How to Align an Icon to the Right Inside a Label Element with Bootstrap 4

I'm attempting to achieve this layout with the icon contained within a label element. Edited in Photoshop: https://i.sstatic.net/m3Fax.png Current layout: https://i.sstatic.net/XRjvH.png Below is the code snippet for that particular section < ...

htmlcsstwitter-bootstrapbootstrap-4

Bootstrap 4 input fields extend past padding boundaries

I have created a basic form using the following code: <div class="container"> <div class="jumbotron" style="width:100%"> <h1> ConfigTool Web Interface </h1> <p> Edit the con ...

csstwitter-bootstrapbootstrap-4

"Utilize AJAX to submit the value of the text box input from a jQuery slider when the Submit Button

Whenever I adjust the sliders, the value is shown in an input textbox. However, when I move the slider and check the values echoed from the textboxes on another PHP page, they are always displaying as 0. Even after clicking the submit button, it still echo ...

javascriptphphtmlajaxxmlhttprequest

Are there ways to incorporate a variable within a Regular Expression in Javascript?

I've already checked the Mozilla website and W3schools, but I can't seem to find the solution. var modifyString = function (string1, string2) { if (string2.match(string1)) { string1 = new RegExp(string1); string2 = string2.replac ...

javascriptregex

AppleScript: Check if the value of document.getElementById is empty, then fill in the value

Hello everyone, it's my first time asking a question here. I have an AppleScript that takes values from a Numbers document and fills them into different fields of a webform using document.getElementById. Everything is working perfectly so far, but now ...

javascriptwebformsapplescript

What to do when faced with the error message "Nodemon is not recognized as a command"?

When I try to run npm start, my Node.js is not starting. The error message displayed is: 'nodemon' is not recognized as an internal or external command, operable program or batch file. I have double-checked my environment path and also tried r ...

javascriptnode.jsexpressnpm

What could be causing the $httpProvider.interceptors to unexpectedly return an 'undefined' value?

Having some trouble parsing the response of my basic AngularJS app that consumes Yelp's API using $httpProvider.interceptors. This is the structure of my app: var app = angular.module("restaurantList", []); The yelpAPI service handles authenticatio ...

javascriptangularjsapiangular-httpangular-http-interceptors

Tips for inserting information from a JSON file into a mailto hyperlink

As a newcomer to JavaScript, I am eager to tackle the challenge presented below: Situation: In possession of a JSON file containing personal details such as name, email address, bio, etc., my task is to design a basic web page showcasing this data for ea ...

javascriptjson

What exactly is the significance of the error message "The JSX element type 'Header' does not have any construct or call signatures"?

I am encountering an error in my code, specifically with the Header and List elements. The error message keeps stating that the JSX element type Header does not have any construct... What could be causing this issue? import React, { useEffect, useState } ...

javascriptjsxsemantic-ui-react

Getting Started with Angular 2 Installation

Looking for a straightforward way to incorporate Angular2 into a single HTML file without using Bower, NPM, NuGet, or other complex methods? EDIT: Thanks to Dieuhd's suggestion, I was able to make Angular 2.0 work using the following script referenc ...

javascripthtmlangular

What could be causing React onclick events to not trigger when wrapped within a Vue application? (No additional libraries)

As I dive into the world of combining React and Vue components, I encountered an interesting challenge... const RootTemplate = () => { return ( <div id="vue-app"> ... <IconButton color="inherit" onClick={thi ...

javascriptreactjsvue.js

Selecting a dropdown value dynamically after a form submission in ColdFusion using jQuery

I created a basic form with the use of an onload function to populate market values by default. However, I encountered an issue where after selecting a market value from the drop-down list and submitting the form, the selected value does not stay selected ...

javascriptjquerycoldfusion

Each occurrence of a variable update will result in the storing of its value within an

I'm struggling to include a variable in an array without it changing. Every time I try to push the variable to the array, it seems to alter. i = 10; function addToArray() { let b = []; b.push(i); console.log(b); } addToArray(); The variable n ...

javascriptarrays

The Node gracefully disconnects and apologizes: "I'm sorry, but I can't set headers after they have already

events.js:160 throw er; // Unhandled 'error' event ^ Error: Can't set headers after they are sent. register.js:20:18 register.js user.save(function(err) { if(err){ return mainFunctions.sendError(res, req, err, 500, ...

javascriptnode.jsapi

How can you retrieve the <head> content from a remote website without being able to make any changes to that site?

Imagine I need to access the <head> tag of a remote website like YouTube. Whenever I attempt this, I encounter an error message: Access to XMLHttpRequest at ‘Website I am trying to access for the head section’ from origin ‘My Website’ has b ...

javascriptjquerygoogle-chrome-extensionxmlhttprequestcross-domain

What is causing fs.readFileSync to not recognize my json document?

So, I've been working on creating a Discord bot that can extract specific data from my JSON file. Here is the structure of my project: Project | +-- data/ | | | +-- compSciCourses.json | +-- src/ | | | +-- search.js | +-- bot.js | +-- t ...

javascriptnode.jsjsonnpmdiscord.js

Encountering an issue while trying to verify user registration in MySQL using Node.js Express. During the user registration process, an error arises indicating that 'res' is not defined

import React from 'react' import { Link } from 'react-router-dom' import {useNavigate} from 'react-router-dom'; import { useState } from 'react' axios from "axios" const Register = () => { const [i ...

javascriptnode.jsreactjsexpressaxios

How can tick values be displayed on a c3js line chart when all data is unselected?

I'm currently working with a c3js line chart that displays 3 different lines. However, I noticed that when I remove all data sources, the x-axis tick values disappear. Is there a way to keep the x-axis tick values visible even when there is no data pr ...

javascriptd3.jsdata-visualizationc3

Unable to get the desired 100px margin at the bottom

Can someone assist me in positioning the right side image at the bottom of the div tag using CSS? I have tried using the .up class in my style tag but with no success. How can I achieve this by adjusting the margin? <!DOCTYPE html> <html lang=" ...

htmlcsshtml5-canvas