CODEWITHSUNDEEP
javascripthtmlcssasp.net
Emre Aslan
Emre Aslan

Reputation: 45

How to get div id in Javascript?

I want to click li with click property.

<ul class="list-unstyled clearfix">
    <li style="float: left; width: 33.33333%; padding: 5px;" onclick="maviTema()">
</ul>

And after I will run maviTema function in javascript.This javascript code changes my panel heading color.How can I do?

function maviTema() {
  var div = document.getElementById('baslikBilgi');           
  div.style.backgroundColor = 'green'; 
}

I want to set back color id="baslikbilgi":

<div class="bg-blue-active" id="baslikBilgi">Başlık Bilgileri</div>

Upvotes: 0

Views: 266

Answers (5)

Fahad
Fahad

Reputation: 113

Your Code works fine. Make sure you have the script tags If you are importing another js files into your page in the footer try to move your script above them or try to run it from the header, and it Will work fine

<script>

 function maviTema() {
 var div = document.getElementById('baslikBilgi');
            div.style.backgroundColor = 'green';

        }
</script>

Upvotes: 0

Kaushik solanki
Kaushik solanki

Reputation: 438

 
   function maviTema() {
        var div = document.getElementById('baslikBilgi');           
            div.style.background = 'green';

    } 
<ul class="list-unstyled clearfix"> 

    <li style="float: left; width: 33.33333%; padding: 5px;"onclick="maviTema()">
    <a href="javascript:void(0);" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"> </a>
     <p class="text-center no-margin">Mavi</p> 
    </li>
    </ul>

<div class="bg-blue-active" id="baslikBilgi">Başlık Bilgileri</div>

Try This,

   <ul class="list-unstyled clearfix"> 

    <li style="float: left; width: 33.33333%; padding: 5px;"onclick="maviTema()">
    <a href="javascript:void(0);" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"> </a>
     <p class="text-center no-margin">Mavi</p> 
    </li>
    </ul>
 <script>
    function maviTema() {
        var div = document.getElementById('baslikBilgi');           
            div.style.background = 'green';

    } 
</script>
<div class="bg-blue-active" id="baslikBilgi">Başlık Bilgileri</div>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Why do you want to trigger function with click, you can just call it right after your function.

function maviTema() {
  var div = document.getElementById('baslikBilgi');
  div.style.backgroundColor = 'green';
}
maviTema();
<div class="bg-blue-active" id="baslikBilgi">Başlık Bilgileri</div>

Or if setting bg-color is only need of this function, then you can try simple code instead

document.getElementById('baslikBilgi').style.background='green'

Upvotes: 0

Raoul Cornelissen
Raoul Cornelissen

Reputation: 137

<div class="bg-blue-active" id="baslikBilgi">Başlık Bilgileri</div>

<li style="float: left; width: 33.33333%; padding: 5px;" onclick="maviTema()">Link</li>

<script>
function maviTema() {
            var div = document.getElementById('baslikBilgi');
                div.style.backgroundColor = 'green';

        }
</script>

When I have this code on my index.html/index.php file and I click the 'li' it works fine for me!

Make sure you have your Javascript code in a script tag ;)

Upvotes: 0

user7210414
user7210414

Reputation:

I'm not sure entirely what your question is as you have seemed to have answered it in your post. To change the background color of an element using vanilla JS all you need to do is set the backgroundColor property like so:

document.getElementById('baslikBilgi').style.backgroundColor='#0f0'

Upvotes: 1

Related Questions