What is the reason behind genNewColor function's malfunction?

I'm having trouble with this code that is supposed to generate a random color. The CSS formatting works perfectly, but I suspect there might be an issue with the function itself. When I try to run the code, it doesn't produce any error messages – it simply doesn't work as expected.

<!DOCTYPE html>
<html>
<head>
<title>
Color Randomizer
</title>
<style>
body{
margin: 0;
padding: 0;
background: #161818;
font-family: "Consolas";
}
.color{
margin-top: 300px;
text-align: center;
}
#hex{
display: block;
color: white;
font-size: 100px;
text-transform: uppercase;
margin: 0px;
}
.color button{
background: none;
outline: 10px;
color: white;
cursor: pointer;
font-size: 40px;
border: 3px solid white;
}
</style>
</head>
<body>

<div class="color">
<span id="hex">#??????</span>
<button onclick="genNewColor()">Generate New Color</button>
</button>
</div>

<script type="text/javascript">
function genNewColor() {
var symbols,color;
symbols = "0123456789ABCDEF";

color = "#";
for(var i =0;i<6;i++){
color = color + symbols[Math.floor(Math.random() * 16)]
}
document.body.style.background = color;
document.getElementById("hex").innerHTML = color
}
</body>
</html>

javascripthtmlcss

Answer №1

There is a missing end tag for </script>: (please scroll down the preview window)

<!DOCTYPE html>
<html>
<head>
<title>
Color Generator 
</title>
<style>
body{
margin: 0;
padding: 0;
background: #161818;
font-family: "Consolas";
}
.color{
margin-top: 300px;
text-align: center;
}
#hex{
display: block;
color: white;
font-size: 100px;
text-transform: uppercase;
margin: 0px;
}
.color button{
background: none;
outline: 10px;
color: white;
cursor: pointer;
font-size: 40px;
border: 3px solid white;
}
</style>
</head>
<body>

<div class="color">
<span id="hex">#??????</span>
<button onclick="genNewColor()">Generate New Color</button>
</button>
</div>

<script type="text/javascript">
function genNewColor() {
var symbols,color;
symbols = "0123456789ABCDEF";

color = "#";
for(var i =0;i<6;i++){
color = color + symbols[Math.floor(Math.random() * 16)]
}
document.body.style.background = color;
document.getElementById("hex").innerHTML = color
}
  </script>
</body>
</html>

Answer №2

Your <button> element seems to have an extra closing tag </button>, and your <script> tag appears to be missing the closing tag </script>.

To see a practical example of your code with the above fixes, check and run the following Code Snippet:

function genNewColor() {
  var symbols,color;
  symbols = "0123456789ABCDEF";

  color = "#";
  for(var i=0;i<6;i++){
    color = color + symbols[Math.floor(Math.random() * 16)]
  }
  document.body.style.background = color;
  document.getElementById("hex").innerHTML = color
}
body{
margin: 0;
padding: 0;
background: #161818;
font-family: "Consolas";
}
.color{
margin-top: 100px;
text-align: center;
}
#hex{
display: block;
color: white;
font-size: 100px;
text-transform: uppercase;
margin: 0px;
}
.color button{
background: none;
outline: 10px;
color: white;
cursor: pointer;
font-size: 40px;
border: 3px solid white;
}
<div class="color">
  <span id="hex">#??????</span>
  <button onclick="genNewColor()">Generate New Color</button>
</div>

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 is the process for creating a default button in Ionic framework?

Recently, I developed an app that includes a survey page. Each question in the survey has two buttons for the user to select: Yes or No. However, as a newcomer to using Ionic, I encountered an issue after building the code and checking the output. One of ...

cssangularionic-frameworkionic4

Issue with reverse document referencing in Mongoose

I've been searching extensively for a way to reference documents bidirectionally in Mongoose. Despite all the documentation and examples provided in Populate, they only show how to save the objectID of one document in another. Let's say I have a ...

javascriptmongodbexpressmongoose

What causes the delay in CSS animations?

Is there a way to trigger an "updating" image to spin while a long JavaScript function is running? I am currently using JQuery to add a class called "spinning", defined in my CSS for the animation. The problem is that when I add the class and then call a l ...

javascriptjqueryhtmlcssanimation

JavaScript: Adding up whole numbers--- Reference Error: Undefined

I'm having trouble with my code because it's saying that "t1" is not defined, even though it's the name of my text box. I tried making the variable global by declaring it outside the function, but it didn't solve the issue. Interestingl ...

javascriptreferenceerror

Is gulp.dest set to match the current file?

I'm having trouble directing my compiled .css file to the same directory as its original .scss version. gulp.task('sass', function() { return gulp.src([ appDir + '/*.scss', appDir + '/**/*. ...

csssassgulpgulp-sass

PHP experiencing issues when trying to save data to MySQL database

I'm currently facing an issue with my HTML page that contains input fields. I'm using PHP to validate the data and insert it into my MySQL Database named 'fantasymock'. Despite successful validation, the data does not get written into t ...

phphtmlmysqldatabase

padding applied exclusively to the Bootstrap column when viewed on a large grid

Can padding be added only for the large grid and not for the medium grid? Large grid with padding: <div class="col-lg-4 pl-3"> </div> Medium grid without padding: <div class="col-md-3"> </div> ...

htmlcssbootstrap-4

Troubles arise when hovering over the <strong> tag and the <h4> element

While hovering over my h4 tag in the table, everything functions correctly. However, when I hover over the strong tag inside the h4 element, the strong tag inherits the same hover effect as the h4 tag. The structure of each td element within the table is ...

htmlcsshover

I am encountering a 'Cannot GET /index.html' error when running my Node.js and Express application, even though I do not have an index.html file

I'm puzzled by the error I'm encountering. Everything runs smoothly on my local machine, but when I try running it on Linux, this error pops up. I've already created ejs files and included all necessary components. Additionally, there is no ...

htmlnode.jslinuxexpressejs

Working on asynchronous processing of Highland stream fragments

My current setup involves utilizing highland.js to process a file using a stream and extract content between specific delimiters. Additionally, I am incorporating async.js to perform a sequence of http requests. I am seeking a way to pass the output x fro ...

javascriptnode.jsasync.jshighland.js

What is the best way to implement asynchronous guarding for users?

Seeking assistance with implementing async route guard. I have a service that handles user authentication: @Injectable() export class GlobalVarsService { private isAgreeOk = new BehaviorSubject(false); constructor() { }; getAgreeState(): Obser ...

javascriptangulartypescript

Using Regex to detect recurrent (similar) patterns in jQuery <input> tags

I need assistance with ensuring that users input article numbers in the correct format, like this: ABC_ABC123; AB__B2A4; ABF_323WET; ... Currently, I have a regex pattern that works for one article number: var mask1 = /^([A-Z]{2})([A-Z|_]{1})_([A-Z0-9]{ ...

javascriptregex

Using Jquery to duplicate a row from one table and insert it into another table

Recently, I've dived into the world of jQuery and JavaScript with the goal of creating a simple app. The main functionality I'm trying to implement is the ability to copy a row from one table to another and then delete the original row when a but ...

javascriptjqueryhtml

`Proliferating values through constantly changing addition`

I am facing an issue with my code that involves 3 input fields: <div class="row"> <input onblur="calc_basic_amount();" id="rate_basic"></input> <input onblur="calc_basic_amount();" id="qty_b ...

javascript

Issue with cross-origin in Salesforce reply (Access-Control-Allow-Origin)

While attempting to retrieve records from Salesforce using external local files via JS, I encountered an issue. Although I can see a response in the network tab, the console displayed the following error message: "XMLHttpRequest cannot load . No 'A ...

javascriptjquerysalesforcesalesforce-service-cloudsalesforce-communities

The CSS grid-template-area feature is not functioning properly in web browsers

Struggling with creating a responsive CSS grid layout for different screen sizes. I want to have five divs on desktop screens and adjust the layout for smaller screens. As a newbie in web development, I'm finding it challenging to get it right. .fir ...

htmlcsscss-grid

Ensure that the array of JSON objects is a subset of another array of JSON objects

I am looking to compare each array in testEdge with newarr and find the matching id for each array in testEdge const testEdge = [ [{ id: '0', from: '0', to: '1' }, { id: '1', from: '1&ap ...

javascriptjqueryarraysobject

Automatically bring in functions in JavaScript without explicitly declaring them

I am working with 2 files. //main.js const one = (text) => { return text; } const two = (text) => { return text + " is here"; } module.exports = [ one, two ] //app.js const data = require("./main.js"); console.log(data.one("exampl ...

javascriptnode.jsreactjs

What is the reason for using grid-lines instead of row and column numbers to position an item on the CSS grid?

During a recent tech presentation I delivered at my workplace on the new CSS grid spec, my manager posed an intriguing question that left me stumped. He wanted to know why elements positioned within a grid are identified based on the grid lines they fall b ...

csscss-grid

Adjust the position and size of an image by hovering over it with your

I'm currently working on implementing a button menu for my website, but I'm facing an issue with the hover effect on images. You can check out what I've done so far at http://jsfiddle.net/tNLUx/ What I want to achieve is when hovering over ...

htmlcsshover