-1

I created a simple code that has a div with a background color of blue and a submit button. Now, If I click the submit button, the background color of the div should change to red. But the code is not working according to the desired output. 

function click(){
 document.getElementById("box").style.backgroundColor="red";
}
#box{
 border: 1px solid black;
 width: 50px;
 height: 50px;
 background-color: blue;
}
<!DOCTYPE>
 <html>
 <title>PRACTICE</title>
 <head>
  <link rel="stylesheet" href="practicestyle.css"/>
  <script src="practicescript.js"></script>
 </head>
 <body>
 
 <div id="box"></div>
 <form>
  <input type="submit" value="submit" onclick="click()">
 </form>
 </body>
</html>
Amine KOUIS
  • 1,686
  • 11
  • 12
Reynard Joseph
  • 103
  • 1
  • 6
  • 1
    Clicking the submit button will submit your form, that will load the page again, that means everything you changed via JS on the “previous” page is gone. – 04FS Mar 05 '19 at 09:26
  • There are two problems here. Looking for a duplicate for the second one. – Quentin Mar 05 '19 at 09:26
  • you have to prevent the submit action & use ajax to submit the data ow use type="button" instead of submit – Ashu Mar 05 '19 at 09:26
  • @amyloula The propagation is not relevant here. They need to call `event.preventDefault()`. – connexo Mar 05 '19 at 09:29

1 Answers1

0

you have used submit instead of button please go through this

Button Types There are three types of buttons:

submit — Submits the current form data. (This is default.) reset — Resets data in the current form. button — Just a button. Its effects must be controlled by something else (that is, with JavaScript).

NPE
  • 429
  • 2
  • 16