<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
<script>
calculus() {
floor_height = 0
height_input_code = document.getAttributeById("height_input").value
floor_height = height_input_code / 2.7
console.log('This height is approximately', floor_height, 'floors of a regular living building', target='output')
}
</script>
</style>
</head>
<body>
<div id="input">
<input type="number" step="any" id="height_input" style="margin:0; width: 1000px; height: 50px; font-size:2vw; border: solid 2px black">
<button type="button" onClick="calculus()" placeholder="✓" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">
</div>
<div id="output">
</div>
</body>
</html>
I've been trying to do a somewhat of a converter but i dont know how to submit variables through button and process them.
I tried 'attaching' to , after which is pressed, the code outputs an equivalent of meters in floors of a building for demonstration, but the log says that "calculus() is not defined", though it is cleadly in the and named accordingly. What am i doing wrong?
CodePudding user response：
There are some errors on your code.
Firstly, your script is inside the style tag, but it shoud be outside.
Secondly, to define the function calculus you should use the function keyword function calculus() {}.
Thirdly, if you want to write the text into the output element, yous can not use the console.log function.
Finally, you should use getElementById instead of getAttributeById to fetch the element and then get the value.
The final code should be the next one:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
</style>
<script>
function calculus() {
floor_height = 0
height_input_code = document.getElementById("height_input").value
floor_height = height_input_code / 2.7
document.getElementById("output").textContent = 'This height is approximately ' floor_height ' floors of a regular living building'
}
</script>
</head>
<body>
<div id="input">
<input type="number" step="any" id="height_input" style="margin:0; width: 1000px; height: 50px; font-size:2vw; border: solid 2px black">
<button type="button" onClick="calculus()" placeholder="✓" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">
</div>
<div id="output">
</div>
</body>
</html>
CodePudding user response：
- Make your style and your script tags separate
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
</style>
<script>
calculus() {
floor_height = 0
height_input_code = document.getAttributeById("height_input").value
floor_height = height_input_code / 2.7
console.log('This height is approximately', floor_height, 'floors of a regular living building', target='output')
}
</script>
2 function compute needs to be defined as
function compute(e) {
3 You can't use console.log to send your log to an html element. Here's how to do it
document.getElementById("output").textContent = floor_height;