动态更新 Div 的 Javascript 在网站上不起作用

Question

我正在 Magento 中的产品页面上工作，我正在尝试获取自定义选项文本字段输入来动态更新 div 的内容。该代码在 JSFiddle 中运行良好，但是在实时页面上无法运行。我需要帮助来诊断代码为何无法在页面上运行。

JS fiddle :http://jsfiddle.net/9cyXq/57/

HTML:

<input type="text" onchange="opConfig.reloadPrice()" id="options_35_text" class="input-text required-entry  product-custom-option length-input" name="options[35]" value="10">
<br />Length: <div id="length" style="display:inline-block;">10<div>

JS:

var input = document.getElementById('options_35_text'); 
input.onkeyup = function() {
    document.getElementById('length').innerHTML = input.value;    
}

Answer 1

像这样使用js:
HTML:

<input id="inp"type="text" onkeyup="func()" value="10">
<br />Length: <div id="length" style="display:inline-block;">10<div>

JS:

function func() {
    var input = document.getElementById('inp'); 
    document.getElementById('length').innerHTML = input.value;    
}

或者你可以这样写:

<script type="text/javascript">
function func() {
    var input = document.getElementById('inp'); 
    document.getElementById('length').innerHTML = input.value;    
}
</script>
<input id="inp"type="text" onkeyup="func()" value="10">
<br />Length: <div id="length" style="display:inline-block;">10<div>

在 JSFidle 中，您可以选择要加载 js 部分的位置(单击“javascript”附近的齿轮)。当我输入“No wrap -in body”时，第一种方法有效 ^^