Question 37556 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Button will not click on HTML local website. I am starting a "counting" project and I am running a test – Ubuntu

I expected that if I clicked "increment" button on website that I will get a respond "click" as output in consol. It doesn’t even show a movement of being clicked. But It works if I run the code. I am running a test and I am using VS code and Microsoft Edge for website app.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="count.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>INCREMENT</title>
    </head>
    <body>
        <h1>People entered:</h1>
        <h2 id="count-el">0</h2>
        <button id="increment-btn" onclick="increment()">INCREMENT</button>
        <script src="count.js"></script>
    </body>
</html>

body {
    background-image: linear-gradient(rgba(170, 170, 170, 0.75),rgba(170, 170, 170, 0.75)),url("https://images.unsplash.com/photo-1495313196544-7d1adf4e628f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80");
    background-size: cover;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
}

h1 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}

button {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-weight: bold;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 5px;
}

#increment-btn {
    background: darkred;
}

#save-btn {
    background: darkgreen;
}

// document.getElementById("count-el") .innerText = 5

function increment() {
    console.log("clicked")
}

console.log("clicked")

// I also tried this code below

function increment() {
    
}

console.log("clicked")
Tags:

2

Answers


  1. 0

    In your example, you are redefining the increment function. Also, you print out to the console outside of the function, which causes the code to print to the console as soon as it loads. I removed the redefinition of the function, and it works as you expected. Try it out. If it is still doesn’t work for you, better attach the structure of files, maybe you are loading the wrong script.

    function increment() {
    console.log("clicked")
}
    body {
    background-image: linear-gradient(rgba(170, 170, 170, 0.75),rgba(170, 170, 170, 0.75)),url("https://images.unsplash.com/photo-1495313196544-7d1adf4e628f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80");
    background-size: cover;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
}

h1 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}

button {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-weight: bold;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 5px;
}

#increment-btn {
    background: darkred;
}
    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="count.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>INCREMENT</title>
    </head>
    <body>
        <h1>People entered:</h1>
        <h2 id="count-el">0</h2>
        <button id="increment-btn" onclick="increment()">INCREMENT</button>
        <script src="count.js"></script>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    just make a css script for

    button:active {
   background-color: red;

    so that the color changes while it is being pressed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search