CODEWITHSUNDEEP
javascripthtml
Kazzy
Kazzy

Reputation: 13

How do I change a background color in JS?

I need to change the background color of a div(dashboard) from JS. As of now it only changes for a second and resets back to the original color.

function validateForm() {
  var divtag = document.getElementById("dashboard");
  divtag.style.backgroundColor = "red";
}
<div id="dashboard">
  <i class="fas fa-compact-disc fa-5x"></i>
  <form>
    <fieldset>
      <legend>Track Search</legend>
      <input type="text" id="tname" name="tname" placeholder="Specify a Track">
      <button class="far fa-file-audio fa-2x" onclick="searchT()"></button>
    </fieldset>
  </form>

  <form name="color" onsubmit="validateForm()">
    <fieldset>
      <legend>Music Dashboard Scheme</legend>
      <input type="radio" id="RGB" name="choice" value="RGB" checked="checked">
      <label for="RGB">RGB</label>
      <input type="radio" id="HEX" name="choice" value="HEX">
      <label for="HEX">HEX</label>
      <input type="text" id="cvalue" name="cvalue" placeholder="Enter Colour Value" required>
      <input type="submit" src="fas fa-palette fa-2x" alt="Submit"></input>
    </fieldset>
  </form>
</div>

Upvotes: 1

Views: 108

Answers (3)

symlink
symlink

Reputation: 12208

return the function in your onsubmit event handler, then within your function, return false. This tells the browser not to submit your form. 

function validateForm() {

  var divtag = document.getElementById("dashboard");
  divtag.style.backgroundColor = "red";
  
  return false
}
<div id="dashboard">
  <i class="fas fa-compact-disc fa-5x"></i>
  <form>
    <fieldset>
      <legend>Track Search</legend>
      <input type="text" id="tname" name="tname" placeholder="Specify a Track">
      <button class="far fa-file-audio fa-2x" onclick="searchT()"></button>
    </fieldset>
  </form>

  <form name="color" onsubmit="return validateForm();">
    <fieldset>
      <legend>Music Dashboard Scheme</legend>
      <input type="radio" id="RGB" name="choice" value="RGB" checked="checked">
      <label for="RGB">RGB</label>
      <input type="radio" id="HEX" name="choice" value="HEX">
      <label for="HEX">HEX</label>
      <input type="text" id="cvalue" name="cvalue" placeholder="Enter Colour Value" >
      <input type="submit" src="fas fa-palette fa-2x" alt="Submit"   />
    </fieldset>
  </form>
</div>

Upvotes: 0

Alessio Cantarella
Alessio Cantarella

Reputation: 5211

It happens because the form submit reloads the page. You could avoid it by passing event to validateForm, and calling event.preventDefault inside the function.

function validateForm(event) {
  event.preventDefault();
  var divtag = document.getElementById("dashboard");
  divtag.style.backgroundColor = "red";
}
<div id="dashboard">
  <i class="fas fa-compact-disc fa-5x"></i>
  <form>
    <fieldset>
      <legend>Track Search</legend>
      <input type="text" id="tname" name="tname" placeholder="Specify a Track">
      <button class="far fa-file-audio fa-2x" onclick="searchT()"></button>
    </fieldset>
  </form>

  <form name="color" onsubmit="validateForm(event)">
    <fieldset>
      <legend>Music Dashboard Scheme</legend>
      <input type="radio" id="RGB" name="choice" value="RGB" checked="checked">
      <label for="RGB">RGB</label>
      <input type="radio" id="HEX" name="choice" value="HEX">
      <label for="HEX">HEX</label>
      <input type="text" id="cvalue" name="cvalue" placeholder="Enter Colour Value" required>
      <input type="submit" src="fas fa-palette fa-2x" alt="Submit">
    </fieldset>
  </form>
</div>

Upvotes: 1

praveen-me
praveen-me

Reputation: 536

You need to use preventDefault to disable default submitting behaviour.

Like that:

function validateForm(event) {
  event.preventDefault();

  var divtag = document.getElementById("dashboard");
  divtag.style.backgroundColor = "red";
}

Upvotes: 2

Related Questions