onclick/Button Doesn't work in Javascript/HTML-CodePudding

I didn't get a error or something the button's just not doing the assigned function. Here is My code: Html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="projectscss.css">
        <script src="projectsjs.js"></script>
    </head>
    <body>
        <h1 class="title">BMI Calculator</h1>
        <button type="button" class="height" onclick="cmtosomethings">Centimetre to 
         Metre/Feet/Kilometres</button> <br>
         <p>Write 'M' for metres, "KM" for kilometres, "F" for feet, "I" for inches</p>
    </body>
    </html>

The "projectsjs.js" file code:

function cmtosomethings() {
    var op = prompt("Metres, Feet, inches or kilometres?")
    if (op == "M") {
        var cmtom = prompt("Write number in centimetre for converting to metres: ")
        var number = parseFloat(cmtom)
        var result = number / 30.48
        var alert = alert(result)
    }
}

Here is the "projectscss.css" file code:

html, body {
    margin: 0;
    padding: 0;
    background-color: chocolate
}

.title {
    font-family: "Papyrus", fantasy
}

CodePudding user response：

You should use onclick="cmtosomethings()". The expression will be evaluated as javascript.

Also see: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_—_dont_use_these

...the attribute value is literally the JavaScript code you want to run when the event occurs...

CodePudding user response：

It is generally not a good idea to use inline event handlers. Assign the handler within the script.

document.querySelector(`button.height`).addEventListener(`click`, cmtosomethings);

function cmtosomethings() {
  var op = prompt("[M]etres, [F]eet, [I]nches or Kilometres (KM)?");

  if (op == "M") {
    var cmtom = prompt("Write number in centimetre for converting to metres: ");
    console.log(parseFloat(cmtom) / 30.48);
  }
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: chocolate;
}

.title {
  font-family: "Papyrus", fantasy;
}

<h1 class="title">BMI Calculator</h1>
<button type="button" class="height">
  Centimetre to Metre/Feet/Kilometres
</button>
<p>Write 'M' for metres, "KM" for kilometres, "F" for feet, "I" for inches</p>