Member Avatar for davy_yg

Hello,

Any idea how to change the css codes just by pressing a button?

I wonder how to do this?

Any clue?

  • 2 Contributors
  • 8 Replies
  • 368 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by cereal

Recommended Answers

All 8 Replies

Member Avatar for davy_yg

I make a little revision to make it works on different situation.

index.php

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p:first").addClass("intro");
        });
        $("button2").click(function(){
            $("p:first").addClass("intro2");
        });
        $("button3").click(function(){
            $("p:first").addClass("intro3");
        });
    });
    </script>
    <style>
    .intro {
        font-size: 150%;
        color: red;
    }

    .intro2 {
        font-size: 150%;
        color: blue;
    }

    .intro3 {
        font-size: 150%;
        color: green;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Add a class name to the first p element</button>
    <button2>Add a class name to the first p element</button2>
    <button3>Add a class name to the first p element</button3>
    </body>
    </html>

I don't think button2 works! How to replace button2 and 3 so that I can have 3 button options with 3 different text color.

Member Avatar for davy_yg

Cek this one! I can only change the text color but not the circle color.

<!DOCTYPE html>
<html>

<head>

<style>
#circle1 {

    background-color: green;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;

}
</style>

</head>

<body>

<div id="circle1">1</div>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('circle1').style.background-color = 'red'">
red!</button>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'blue'">
blue!</button>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'green'">
green!</button>

</body>
</html>
Edited by davy_yg
Member Avatar for davy_yg

I don't think the margin has an issue.

I wonder why this line: <button type="button"
onclick="document.getElementById('circle1').style.background-color = 'red'">
red!</button>

Cannot change a line of css item in the stylesheet?

Thanks.

Member Avatar for cereal

I don't think the margin has an issue.

That's correct, in fact, I was referring to CSS properties with a specific feature: hyphens.

Member Avatar for davy_yg

Cek this out - I am trying to change the whole 3 circles with one button press. Any clue how? Why only one circle that changes color?

index.php

<!DOCTYPE html>
<html>

<head>

<style>
#circle1 {

    background-color: green;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;

}

.button1 {
    background-color: #f44336; /* Red */
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.button2 {
    background-color: #008CBA; /* blue */
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.button3 {
    background-color: #4CAF50; /* green */
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
</style>

</head>

<body>

<div id="circle1"></div>
<div id="circle1"></div>
<div id="circle1"></div>

<h1 id="id1">Menu CSS</h1>

<button type="button" class="button1" onclick="document.getElementById('circle1').style.backgroundColor = 'red'">
</button>

<button type="button" class="button2" onclick="document.getElementById('circle1').style.backgroundColor = 'blue'">
</button>

<button type="button" class="button3" onclick="document.getElementById('circle1').style.backgroundColor = 'green'">
</button>

</body>
</html>
Member Avatar for cereal

I am trying to change the whole 3 circles with one button press. Any clue how? Why only one circle that changes color?

The reason is the ID (unique identifier):

<div id="circle1"></div>
<div id="circle1"></div>
<div id="circle1"></div>

which must be unique in the page, you have three of them.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.