javascript未在Ruby on Rails中执行onClick

试图让一些简单的javascript工作，但它没有执行onClick或onChange

app/views/chooser/index.html.erb

<form name="grams_calc">
    <label for="coffee">How much coffee (grams) do you want to make?</label><br/>
    <input type="text" id="coffeeLiquidMake" placeholder="One cup = 300 grams." onChange="finalCoffee()" style="width: 250px">grams.
    <br/>
    <input type="button" value="Give Me Coffee!" onClick="calcBrew(document.getElementById('coffeeLiquidMake').value)">
    </br>
    Use <span id="coffeeBeanUse"> . . . </span>grams of coffee beans to make <span id="coffeeLiquidFinal"> . . . </span>.
    <br/>
</form>

我将其包含在我的app/layouts/application.html.erb文件中：

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

您拼写了一个拼写错误

coffeeLiquidMake

和

coffeLiquidMake

。你把

coffee

拼错了

我在你的代码中发现了几个错误

首先，您的第二个br标记，您可以像

一样使用它，而不是

然后，您得到的错误是：

TypeError:null不是对象（计算'document.getElementById（“coffeeLiquidMake”）.value'）

这是因为您在finalCoffee函数中只使用了一个e就编写了coffeeLiquidMake

另外，在JS中，calcBrew函数都是小写的，但在HTML中是用大写的“B”来调用它

我希望这对你有帮助

函数finalCoffee（）{
document.getElementById（“coffeeLiquidFinal”）.innerHTML
=document.getElementById（“coffeeLiquidMake”）.value；
};
函数calcBrew（金额）{
金额=浮动（金额）；
var brewCalc=5*金额；
document.getElementById（“coffeeBeanUse”）.innerHTML=brewCalc；
};

你想煮多少咖啡（克）？

克。




使用要制作的咖啡豆克数。


您确定RoR语句包含您的JS吗？？一旦页面加载到你的浏览器中，如果你查看源代码，你会看到包含JS吗？我想是的。我不是100%肯定。它说它已加载到资源中，但它给了我一个错误。TypeError:null不是对象（计算'document.getElementById（“coffeeLiquidMake”）.value'），因此JS显然已加载。尝试调试JS会很好。你在什么地方上网了吗？哪里是上网的好地方？我把所有的东西都放在这里了。我想我找到问题了。我要发一封回信，但没用。当我调试它时，它说TypeError:null不是一个对象（计算'document.getElementById（“coffeeLiquidMake”）.value'）还说，ReferenceError:Can't find variable:Calcbrew就是它。我错过了什么？我在view.function finalCoffee（）的输入中调用finalCoffee（）{document.getElementById（“coffeeLiquidFinal”）.innerHTML=document.getElementById（“coffedLiquidMake”）.value；}；函数calcbrew（amount）{amount=parseFloat（amount）；var brewCalc=5*amount；document.getElementById（“coffeeBeanUse”）.innerHTML=brewCalc；}；你想煮多少咖啡（克）？
克。

使用。要制作的咖啡豆克数。

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>