使用javascript发布计算产品

使用javascript发布计算产品,javascript,string,variables,Javascript,String,Variables,我想知道是否有人能帮助我理解为什么我的代码没有执行用户输入变量和将厘米转换为英寸并将结果读取到输入框的代码行的总和。见代码: <select id="option"> <option value="option1">Select</option> <option value="option2">Centimeters/Inches</option> </select> Input Value: &l

我想知道是否有人能帮助我理解为什么我的代码没有执行用户输入变量和将厘米转换为英寸并将结果读取到输入框的代码行的总和。见代码:

<select id="option">
    <option value="option1">Select</option>
    <option value="option2">Centimeters/Inches</option>
</select>

Input Value:
    <ul class="input-list style-2 clearfix">
        <li>
         <input type="text" placeholder=":input" id="value">
         </li>
    </ul>

<button onclick="calcFunction()" class="myButton">Convert</button>

Result:
<ul class="input-list style-2 clearfix">
    <li>
    <input type="text" id="resultbox1">
     </li>
</ul>
<p style="text-align:center">
Equals
</p>
<ul class="input-list style-2 clearfix">
    <li>
     <input type="text" id="resultbox2">
     </li>
 </ul>

挑选
厘米/英寸
输入值:
转换 结果:

等于

还有我的Javascript

<script>
var op1 = document.getElementById("option");
var value = document.getElementById('value').value;
var centimetersinches;

function calcFunction() {

        if (op1.options[op1.selectedIndex].value == 'option1') {
            document.getElementById('resultbox1').value = 'Select a value';
            document.getElementById('resultbox2').value = 'Select a value';

        } else if (op1.options[op1.selectedIndex].value == 'option2') {
            centimetersinches = value * .394;
            document.getElementById('resultbox1').value = value + ' centimeters';
            document.getElementById('resultbox2').value = centimetersinches + ' inches';


        }

var op1=document.getElementById(“选项”);
var value=document.getElementById('value').value;
花椒;
函数calcFunction(){
if(op1.options[op1.selectedIndex].value=='option1'){
document.getElementById('resultbox1')。value='选择一个值';
document.getElementById('resultbox2')。value='选择一个值';
}else if(op1.options[op1.selectedIndex].value==“option2”){
厘米=数值*.394;
document.getElementById('resultbox1')。value=value+'cm';
document.getElementById('resultbox2')。值=厘米数+英寸数;
}

在calcFunction函数之前,我确实有一点jquery,但我不认为这与它有任何关系。据我所知,这应该可以工作。结果框变量后的字符串显示在结果框中,但我无法显示变量。非常感谢任何帮助。

我创建了一个JSFIDLE并在那里修复了它-

两件事

  • 你错过了函数的结束语

  • 每次单击事件发生时,您都需要读取输入字段。这意味着calcFunction中应包含以下三行内容

    var op1=document.getElementById(“选项”)

    var value=document.getElementById('value').value

    花椒

  • 固定代码在这里

    calcFunction = function () {
    
        var op1 = document.getElementById("option");
        var value = document.getElementById('value').value;
        var centimetersinches; 
    
            if (op1.options[op1.selectedIndex].value == 'option1') {
                document.getElementById('resultbox1').value = 'Select a value';
                document.getElementById('resultbox2').value = 'Select a value';
    
            } else if (op1.options[op1.selectedIndex].value == 'option2') {
                centimetersinches = value * .394;
                document.getElementById('resultbox1').value = value + ' centimeters';
                document.getElementById('resultbox2').value = centimetersinches + ' inches';
    
    
            }
    }
    

    “尝试在函数内移动var声明。它们在页面呈现时执行,然后在执行函数时不更新(没有完整源代码的最佳猜测)”-pherris

    尝试在函数内移动var声明。它们在页面呈现时执行,然后在执行函数时不更新(没有完整源代码的最佳猜测)。哈哈!天才。看起来我在脚本顶部声明了它们,你是对的(另外,我在calc函数之前的一些代码中使用了相同的变量。谢谢!