<h1> </h1> Using attributes in a JavaScript function

Hello, I am trying to figure out how to inherit the h1 style CSS inside a JavaScript function called myFunction. Currently, when the button is clicked, it just displays the default h1 style. Any help would be appreciated. Thank you!

<html>

<style type="text/css">

 body {
    color: purple;
    font: normal 18px Verdana, Arial, sans-serif;
    background-color: white }

 h1 {
    color: Red;
    font: normal 20px Verdana, Arial, sans-serif;
    background-color: white }

</style>

<body>

<p id="demo"><h1>Click here.</h1></p>

<button onclick="myFunction()">Check it</button>

<script type="text/javascript">

function myFunction()
{
    document.writeln("<h1>", "Hello there", "</h1>");
}

</script>

</body>
</html>

Answer №1

When <code>document.write (as well as writeln) is called while the document is closed, it will first invoke document.open and then proceed to overwrite the existing document.

As a result of overwriting the document, the stylesheet gets obliterated.

Hence, the key solution is to avoid using document.writeln. It is advisable to utilize standard DOM methods instead. For those in need of guidance on how to achieve this, the W3C offers a web standards curriculum with sections dedicated to Traversing the DOM and Creating and modifying HTML.

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

What makes running the 'rimraf dist' command in a build script essential?

Why would the "rimraf dist" command be used in the build script of a package.json file? "scripts": { "build": "rimraf dist ..." }, ...

Enhancing Next.js Images with Custom CSS Styles

I am working with a Next.js component: import styles from '../styles/Navbar.module.css' import Image from 'next/image' export const Navbar = () => { <div> <Image className={styles["navbar-home-icon"]} ...

Center the popover over the element

I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not be ...

Adding a line break in a Buefy tooltip

I am trying to show a tooltip with multiple lines of text, but using \r\n or is not working. <b-tooltip label="Item 1 \r\n Item 2 \r\n Item 3" size="is-small" type="is-light" position="is-top" animated multilined> ...

What is the best way to define the active <li> tab using JQuery?

Initially, my HTML code includes a set of <li> elements that I want to dynamically add to the existing <ul>. <ul class="tabs" id="modal_addquestion_ul"> <li class="tab-link current" data-tab="multipleChoice">Multiple Choice< ...

Having trouble loading the JSON data for display

My select dropdown is supposed to display the names of states. The data is being fetched from PHP and is also available in the controller JS file. However, the data is showing up as blank in the HTML. When I use console.log(), the fetched result from PHP s ...

Using jQuery to modify the border of a particular row

I am facing an issue where I need to apply a border to two specific rows in a table after it has loaded. These two rows are consistent every time the table is loaded. The code snippet below works, but the default line breaks between the table rows prevent ...

How can I create editable text using typed.js?

How can I achieve the same text animation effect on my website as seen on the homepage of ? I want to utilize the library available at . Specifically, how do I stop the animation when the text is clicked, allowing users to input their own text? Below is ...

The first argument in the Node.appendChild function does not adhere to the Node interface when trying to append to a new element

Hey there, I'm new to web development and could use some help. I'm encountering an error where I am trying to add an href attribute to an image tag. Here is my code: function linkus() { var a = document.getElementsByTagName("img"); ...

The rationale behind organizing analogous variables into groups

Currently, I am grappling with determining the optimal logic for grouping parameters within a specified tolerance level. Let me illustrate this with an example... Task1: parameter1=140 Task2: parameter1=137 Task3: parameter1=142 Task4: parameter1=139 Task ...

Extracting data from a nested JSON array within an AngularJS template

Here is some JSON data: { "tracks": [ { "album": { "released": "2013", "href": "spotify:album:3qGeRY1wt4rrLIt1YuSwHR", "name": "The Marshall Mathers LP2 (Deluxe)", "availability": { ...

jquery is in motion while svg paths are at a standstill, waiting to

i have been attempting to incorporate a css-animated svg into my project. initially, the animation would start automatically, which was undesirable. after some research, i discovered that by declaring it as paused and then triggering it using jQuery with $ ...

Setting up jade includes with gulp-jade: A comprehensive guide

Struggling with setting up Jade includes in your gulpfile.js while using gulp-jade? Check out this link for more information. Below is a snippet from the gulpfile.js: var gulp = require('gulp'); var browserSync = require('browser-s ...

A guide on organizing dates in a datatable using the dd-MMM-yyyy hh:mm tt format

I have encountered an issue with sorting the date column in my datatable. Here is a screenshot showcasing the problem. Below is the code I am using: <table id="tbl" class="table table-small-font table-bordered table-striped"> <thead> &l ...

Retrieve data from two separate files and store it as a two-dimensional array in JavaScript

Is there a way to read and convert two .txt files into a 2d array? I currently have a code snippet that looks like this : var fs = require('fs') file = './text1.txt' fs.readFile(file,'utf-8', (e,d) => { textByLine = d.s ...

When attempting to modify an element in an array within a state-managed object, the input field loses focus

In attempting to address my issue, I have crafted what I believe to be the most concise code example. The main goal is to display a table on the page populated with exercise data retrieved from a database. This data is then assigned to an array of objects ...

Guide on combining two JSON Array objects in Nodejs

Is there a way to merge two JSON Array objects together using Node.js? I am looking to combine obj1 + obj2 in order to create a new JSON object: obj1 = [ { t: 1, d: 'AAA', v: 'yes' }, { t: 2, d: 'BBB', v: 'yes& ...

Achieving a fixed position within a div using CSS

Is there a way to arrange elements inside a div without modifying the HTML code? Yes, CSS can help you achieve this. Consider these blog posts: https://i.sstatic.net/7yTQ5.png The issue at hand is that the 'Read more' button gets pushed down wh ...

An in-depth guide on implementing debounce functionality for `keyup` events in Vue.js

I am attempting to detect when the user begins typing and stops typing using the debounce function. I experimented with Lodash and Underscore.js. On my textArea v-on:keyup="handler($event)" handler: function(e) { ...

Error message indicating that the preflight request failed access control check in Angular 5 with JWT OAuth integration

After spending hours reading through several posts, I have yet to find a solution to a very common problem. It seems that in order for my JavaScript code to access the resource, the server must include the Access-Control-Allow-Origin header in the response ...