CODEWITHSUNDEEP
javascriptjquerycss
aswathy
aswathy

Reputation: 395

div style change on click is not working

I have some div i want change selective div position to center means suppose I select the first two div only that div text move to center on click

$("#key").click(function myfunction() {
  $("div").css("text-align", center);
});
div {
  background-color: yellow;
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>

Upvotes: 1

Views: 89

Answers (4)

Mahendra Kulkarni
Mahendra Kulkarni

Reputation: 1507

@aswathy your all code is okay, only you missed "text-align", 'center'

center property should be in single quotes

  $("#key").click(function myfunction() {
    $("div").css("text-align", 'center');
  });
div {
  background-color: yellow;
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>

Upvotes: 0

PratikSatikunvar
PratikSatikunvar

Reputation: 181

Just a minor miss, need to assign value as string as shown below:

$("#key").click(function() {
   $("div").css("text-align", "center");
});

If you want to give margin than also number will be specified as string as:

$("#key").click(function() {
   $("div").css("padding", "50");
});

Upvotes: 0

Rayon
Rayon

Reputation: 36609

  • Set(toggle) selected class on click of element
  • Remove inline event onselect
  • Set center property to only those elements which are having selected class
  • Set property in quotes, $("div").css("text-align", 'center');

$("#key").click(function myfunction() {
  $("div.toGrab:not(.selected)").css("text-align", '');
  $("div.selected").css("text-align", 'center');
});

$("div.toGrab").on("click", function() {
  $(this).toggleClass('selected');
});
div {
  background-color: yellow;
  margin-top: 20px;
  cursor: pointer;
}
.selected {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div class='toGrab'>blabla</div>
<div class='toGrab'>cat</div>
<div class='toGrab'>rose</div>

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

You don't need to give name to click function. It can be anonymous. Also it should be $("div").css("text-align", 'center') to assign a css property.

function myfunction() {
    //Not sure why you have this on div.
}

$(document).ready(function() {
  $("#key").click(function() {
    $("div").css("text-align", 'center')
  });
});
div {
  background-color: yellow;
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>

Upvotes: 1

Related Questions