javascript - How to stop html button redirecting to another web page automatically -

i have html button:

<button>    <img id = "click-me" src="https:..." alt="add list" style="width: 50px"/> </button> 

which, when clicked, should execute jquery code:

$(function () {     $("#click-me").click(function () {         document.getelementbyid('list').style.backgroundcolor = "red";           }); }); 

but, instead of doing want do, clicking button sends me page of website. how stop this? thanks

edit:

here full html of page:

<div class="form">       <h1>create meeting</h1>        <%= form_for(@newevent) |f| %>            <%= f.text_field :name, :placeholder => "title" %>           <!--< f.collection_select :location, location.all, :id, :locname %> when locations thing-->           <%= f.text_field :description, :placeholder => "short description" %>            <div>             <h2>who's involved?</h2>             <p>select colleague compare calendar yours</p>             <%= f.collection_select :id,                                     customer.where(business_id: current_customer.business_id),                                     :id,                                     :full_name,                                     { prompt: 'select' },                                     { id: "colleage-select", onchange: "rendercolcal(this)" } %>             <button id="click-me" type="button">               <img  src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/07_plus-128.png" alt="add event" style="width: 50px"/>             </button>                <div class = 'row'>                 <div class = 'col-md-6' id = 'left-calendar-wrapper'>                   <h3>your calendar:</h3>                   <%= render partial: '/calendars/show', locals: {} %>                 </div>                  <div class="col-md-6" id="calendar-wrapper">                   <h3>your colleague's calendar:</h3>                   </div>               <div>                 <p>meeting participants:</p>                 <ol id ="list">                   <li>list</li>                  </ol>               </div>               </div>             </div>              <div>             <h2>when want start?</h2>             <%= f.datetime_select :starts_at, :placeholder => "when want it?"   %>           </div>              <div>             <h2>when want end?</h2>             <%= f.datetime_select :ends_at, :placeholder => "when should end?"  %>           </div>             <%= f.submit "create meeting", class: "btn-submit" %>       <% end %>       </div>   </div> </div> 

the jquery remains same

add id="click-me" button , not img. , also, please add type="button" button.

either add e.preventdefault() or return false:

$(function () {     $("#click-me").click(function () {         document.getelementbyid('list').style.backgroundcolor = "red";         return false;     }); }); 

or:

$(function () {     $("#click-me").click(function (e) {         e.preventdefault();         document.getelementbyid('list').style.backgroundcolor = "red";     }); });