Question

这是我的代码。我想创建一个函数，它从输入中获取值，将它们相乘并将结果放到段落中。

function price() {

var x = document.getElementById("widthOfGlass").value;

var y = document.getElementById("heightOfGlass").value;

var price1 = 150;

    return x * y * 0.0001 * price1;
};

document.getElementById("demo").innerHTML = "Price is " + price();

这是HTML：

< input type="text" id="widthOfGlass">

< input type="text" id="heightOfGlass">

< input type="button" onclick='price()' value="Show price" />

< p id="demo">< /p>

Answer 1

请参阅此fiddle

您的代码存在的问题是，在计算完成后，您没有设置innerHTML #demo。您只需在页面加载时设置一次。

因此，要获得所需的输出，请按以下步骤更改您的Javascript。

function price() {
    var x = document.getElementById("widthOfGlass").value;
    var y = document.getElementById("heightOfGlass").value;
    var price1 = 150;
    document.getElementById("demo").innerHTML = "Price is " + x * y * 0.0001 * price1;
};

并记住无需返回计算值。

Answer 2

document.getElementById("demo").innerHTML = "Price is " +

实际上，上面的脚本行只在加载时运行。

你想在点击按钮时运行它，如下所示：

function price() {

var x = document.getElementById("widthOfGlass").value;

var y = document.getElementById("heightOfGlass").value;

var price1 = 150;

    var res =  x * y * 0.0001 * price1;
document.getElementById("demo").innerHTML = "Price is " + res;
};

JS不会从html中选择值

2 个答案:

请参阅此fiddle