Javascript 我想更改span id的外观，使其看起来像输入框，但显示数字？

我正在进行这个简单的html挑战，并获得了计算所有内容所需的所有代码，但是我想将span id的外观更改为输入框，如“晚餐成本”所示。这是我的代码

小费计算器
小费计算器
晚餐费用：$




晚餐的15%：


晚餐的25%：


晚餐加25%小费：
函数计算（）{
var票据=编号（document.getElementById（'bill'）.value）；
var tip=账单*.15；
var tip2=工程量清单*.25；
var总计=票据+tip2；
document.getElementById（“tip”）.innerHTML=“$”+数字（tip）.toFixed（2）；
document.getElementById（“tip2”）.innerHTML=“$”+数字（tip2）.toFixed（2）；
document.getElementById（“total”）.innerHTML=“$”+数字（总账单）.toFixed（2）；
}

将

span

s更改为

input

s，并添加

readonly

属性

15% of the Dinner: $<input id="tip" readonly />
<br>
% of the Dinner: <input id="tip2" readonly />%
<br>
Dinner plus 25% tip: $<input id="total" readonly />

15%的晚餐：$


%晚餐时间：%


晚餐加25%小费：$

这就是你想要的吗

函数计算（）{
var票据=编号（document.getElementById（'bill'）.value）；
var tip=账单*.15；
var tip2=工程量清单*.25；
var总计=票据+tip2；
document.getElementById（“tip”）.innerHTML=“$”+数字（tip）.toFixed（2）；
document.getElementById（“tip2”）.innerHTML=“$”+数字（tip2）.toFixed（2）；
document.getElementById（“total”）.innerHTML=“$”+数字（总账单）.toFixed（2）；
}

form>span{
显示：内联块；
宽度：10雷姆；
高度：1.2rem；
边框：0.5px纯灰色；
}

小费计算器
晚餐费用：$




晚餐的15%：


晚餐的25%：


晚餐加25%小费：

添加样式：

小费计算器
小费计算器
晚餐费用：$






15%的晚餐：装货



25%的晚餐：装货



晚餐加25%小费：装货
函数计算（）{
var票据=编号（document.getElementById（'bill'）.value）；
var tip=账单*.15；
var tip2=工程量清单*.25；
var总计=票据+tip2；
document.getElementById（“tip”）.innerHTML=“$”+数字（tip）.toFixed（2）；
document.getElementById（“tip2”）.innerHTML=“$”+数字（tip2）.toFixed（2）；
document.getElementById（“total”）.innerHTML=“$”+数字（总账单）.toFixed（2）；
}

<style>
   
#total, #tip2, #tip{
border : solid 1px black;
padding: 5px;
}

</style>