The HTML button renders all JavaScript functions as null and void

After adding a button line to enable a clock in HTML and the corresponding function in a <script> tag (which may or may not work), suddenly all functions on the page become undefined. There is only one other function on that page, so it could be causing the issue. I've spent some time looking for syntax errors but haven't been able to find anything.

The order of elements on the page should follow JavaScript, then CSS, then HTML.

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}
.headtitle {
color:red;
font-family: "Courier New", Courier, monospace;
display: flex;
flex-wrap: wrap;
justify-content: center;
border: 5px solid #00f;
padding: 10px;
}
.subtitle{
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 1.25rem
}
a.firstlink{
word-spacing: 30px;
}
a:visited{
color:lightblue
}
body{
background-image: url("http://i.kinja-img.com/gawker-media/image/upload/a942qcqwrcmveiq37zli.png");
background-repeat:repeat;
color: white;
}
.list{
display: inline;
}
.list li{
display: inline;
padding-left: 1.5rem;
}
.button{
float:right;
border: 1px solid #f00;
padding: 5px
}
.button:active{
position: relative;
top: 2px;
left: 2px;
}
.JavascriptButton{
float:right;
}
.clickText{
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Website task.css">
<script type="text/javascript" src="new 1.js"></script>
<script type="text/javascript">
function openFunction() {
window.open('Website Task.html', '_blank');
}
function showTime() {
document.getElementByID("currentTime").innerhtml = "The time now is" startTime();
}
</script>
<title>JavaScript page</title>
</head>
<body>
<div class="header">
<h1 class="headtitle">JavaScript demo page</h1>
<p class="subtitle">This page is for demonstrating functions in JavaScript specifically, as well as jQuery.</p>
<p id="currentTime"></p>
<button onclick="showTime()">Click here to display the current time</button>
<p></p>
<a class="clickText" onclick="openFunction()">Click this text to go back to the previous page in a new window</a>
<button class="JavascriptButton" onclick="window.location='Website Task.html';">Previous page</button>
</div>
</body>
</html>

Answer №1

Errors in your code can easily be discovered by opening dev tools.

document.getElementById("currentTime").innerhtml = "The time is now" startTime();

Correction:

"the time is now " + startTime();

However, the startTime function does not return anything, making it ineffective in this context.

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

Highlight the active menu item using jQuery

Check out my menu example here: http://jsfiddle.net/hu5x3hL1/3/ Here is the HTML code: <ul id="menu" class="sidebar"> <li> <a href="#" class="clickme">Menu</a> <ul id="menu1"> <li><a class="dropdown-clas ...

Is there a more effective method for emphasizing chosen options?

There are approximately 30 options available for users to select. Upon clicking an option, a content/html box specific to that selection is displayed while the others are hidden (similar to a picture lightbox but with html instead of thumbnails and main im ...

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

How can you exhibit choiceType values in Symfony as various hues?

I am struggling to find the right way to save an integer value in my database and display it as a color. Any suggestions on how to achieve this? Here is what my Form currently looks like: public function buildForm(FormBuilderInterface $builder, array $op ...

Use jQuery or javascript to eliminate the 'Webpage Dialog' from the 'showModalDialog' window

At one point on the page, I have a line of code that looks like this: onclick="window.showModalDialog("http://rauf-thecoder.blogspot.com/");" When executed, it displays the following: Is there a way to eliminate the title bar text for the Webpage Dialog ...

How to make the Bootstrap mobile navigation menu taller?

I'm having trouble adjusting the height of the collapsed mobile drop-down navigation. Right now, it's stuck at around 340px and I need it to expand to accommodate all the menu items within the collapsed nav. Despite my efforts searching on Google ...

Error code E11000 is indicating that a duplicate key issue has occurred in the collection "blog-api.blogs" where the index "id_1" is

Issue with Error E11000 duplicate key error collection: blog-api.blogs index: id_1 dup key: { id: null } Encountering an error when trying to insert data after initially inserting one successfully. Referencing the blogSchema.js: const mongoose = req ...

Is extracting the title of an image from Flickr?

I have a JavaScript code that randomly pulls single images from Flickr every time the page is refreshed. Now, I want to add a feature where the title of the image is displayed when it's hovered over. However, I've been searching for a solution fo ...

Storing `this` in a variable that is assigned by an element using inline JavaScript is applicable for either all elements or specifically the active element that contains the assigned value

Consider this scenario: if we include the this attribute in an element's onclick event like onclick="a=this", are we selecting the "p" element or can we use the variable a as an alternative to this? Take a look at this code snippet- <p onclick=" ...

The divs are crashing into each other and moving at varying speeds

I have created a mini game inspired by diep.io on codepen, where you can upgrade your reload and shooting capabilities. However, I have encountered an issue where the bullets start moving at different speeds and end up overlapping each other after shooting ...

Innovative and responsive web design strategies

Although I have a solid understanding of html, css, and JavaScript, I struggle with combining these skills effectively. My expertise lies in developing native apps for Android, where I focus on creating dynamic layouts using relative positions and sizes li ...

What is the process for validating the CSS background-image URL using Javascript?

The concept here is to verify the URL of the CSS element's id (.boot). If the URL matches, which it does, then it should display "hello world." However, despite everything seeming correct, the expected behavior is not occurring, and the reason behind ...

Why is my React Native TouchableOpacity onPress function not functioning properly?

Embarking on my journey with React Native (or any JS framework for that matter), I decided to delve into creating a simple tap game. The concept is straightforward: tap on the blue square, watch it randomly relocate, and repeat the process. Here is a snipp ...

Grabbing an element with Cheerio in Node.JS

Struggling to extract the price element from this page: Running the console.log returns nothing, even though I'm certain I'm targeting the correct element. Any advice on how to tackle this issue? var request = require('request'); var ...

Is there a potential issue with spreading on IE 11 in (Webpack, VueJS)?

Encountering an error on Internet Explorer 11: https://i.sstatic.net/zGEeK.png https://i.sstatic.net/FKSUs.png Reviewing my webpack and babel configurations: webpack configuration const path = require('path'); const webpack = require('we ...

Kentico's reCaptcha feature does not prevent the submission of forms

My WebPart includes the reCaptcha FormControl. <script src='https://www.google.com/recaptcha/api.js'></script> ...... <div class="form-group"> <label>Please type the word below. If required use the buttons to ...

Using AngularJS to prevent HTML injection in input fields

Is there an effective method to prevent HTML injection in input fields? As an example, if I have a search input field: <input id="search" type="text" ng-model="search" placeholder="search..."> I want to ensure that any attempts to input malicious c ...

The event on images is not being triggered by jcarousel

After clicking on the next button, jcarousel is failing to fire events on images. The event is only bound for the initial loading of images. I have included the code I am using to display a preview of the image in the carousel. If anyone could please off ...

Problem with validation in jQuery not being compatible with Kendo Button (sample code provided in jsfiddle)

It took me some time to figure out that the reason jquery-validate wasn't functioning in my Kendo Mobile application was because my submit button was a Kendo Button. Check out this jsfiddle for illustration: DEMO <div id="phoneApp" style="displa ...