前端高度转楼层转换器报错：calculus()未定义问题咨询

你遇到的"calculus() is not defined"错误，以及后续的功能问题，是由几个明显的语法和结构错误导致的，我帮你逐一梳理并修复：

错误点说明 #

• 脚本嵌套位置错误：你把<script>标签直接放在了<style>标签内部，浏览器只会解析<style>里的CSS代码，完全忽略了里面的脚本，导致函数根本没被注册到全局作用域。
• 函数定义语法错误：你写的calculus() { ... }不是合法的普通函数定义方式，在全局作用域下需要用function calculus() { ... }的完整声明语法。
• DOM元素获取方法错误：不存在document.getAttributeById()这个方法，正确的写法是document.getElementById()。
• 结果输出逻辑错误：console.log没有target参数，它只能把内容输出到控制台，要把结果显示在页面的<div id="output">里，需要修改该元素的文本内容。

修复后的完整代码 #

<!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: 100vh;
            overflow: hidden;
        }
        #input {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 3vw;
        }
        #output {
            position: absolute;
            font: small-caps bold 24px/1 sans-serif;
            bottom: 40vh;
            left: 3vw;
            color: #fff;
        }
    </style>
    <!-- 把脚本移到style标签外面，单独的script标签 -->
    <script>
        function calculus() {
            // 正确获取输入框的值
            const heightInput = document.getElementById("height_input").value;
            // 处理空输入或非数值的情况
            if (!heightInput || isNaN(heightInput)) {
                document.getElementById('output').textContent = "请输入有效的高度数值";
                return;
            }
            // 计算楼层数，保留两位小数更直观
            const floorCount = (heightInput / 2.7).toFixed(2);
            // 将结果输出到页面的output元素
            document.getElementById('output').textContent = `这个高度大约相当于 ${floorCount} 层普通住宅楼`;
        }
    </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" placeholder="请输入高度（米）">
    <button type="button" onClick="calculus()" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">✓</button>
</div>
<div id="output"></div>
</body>
</html>

额外优化说明 #

• 调整了body的高度为100vh，确保垂直居中更准确；用transform: translateY(-50%)让输入框真正垂直居中，比原来的margin-top:50vh更合理。
• 给输入框加了占位提示，提升用户体验。
• 增加了输入合法性校验，避免空值或非数值导致的计算错误。
• 对计算结果保留两位小数，显示更友好。
• 给output文本加了白色，在深色背景下更清晰。

内容的提问来源于stack exchange，提问作者Simpractor