هل أستخدم onchange بشكل غير صحيح؟

Question

أحاول الحصول على قيمة (key) الذي يتم تحديثه لتتوافق مع رقم في مربع النص (angle) مقسمة على قيمة (25). ومع ذلك ، لسبب ما ، changeMe لا يبدو أن الوظيفة تنفذ. هل أستخدم onchange بشكل غير صحيح؟

<script type="text/javascript">

function changeMe(x)
{
var y=document.getElementById(x).value;
y = (y/25);
y = (Math.round(y));
document.getElementById(key).value=y;
}
</script>

<form method="POST" action="">
Your Angle: <input type="text" name="angle" id="angle" 
    onchange="changeMe(this.id)" value="0"/>
Key: <span id="key">0</span><br />
</form>

Answer 1

تغيير الخط

document.getElementById(key).value=y;

إلى

document.getElementById('key').innerHTML=y;

Answer 2

لمعرفة ما إذا كان يتم استدعاؤه ، فقط أضف هذا كخط أول:

alert("Hey, I'm being called!");

الآن ، أرى بالفعل مشكلة هنا: في السطر الأخير من وظيفتك ، أنت تفعل getElementById(key), ، ولكن يجب أن ترفق key مع اقتباسات مزدوجة. إذا لم يكن الأمر كذلك ، فإنه يعتبر متغيرًا بدلاً من سلسلة.

Answer 3

ال changeMe(this.id) يزعجني ، أنا أستخدم لرؤية فقط (this), ، ولكن أفضل طريقة لمعرفة ما يجري هي استخدام إما امتداد مطور الويب في IE8 (أنا أضغط على F12 ويظهر) أو ، ويفضل ، Firebug ، على Firefox ، وبعد ذلك يمكنك وضعه في نقطة استراحة في بداية وظيفة changeme وشاهد ما يتم تمريره ، حيث قد يكون هناك خطأ.

والآخران ذكران بالفعل حول المشكلة مع getElementByid الخاص بك.

Answer 4

السطر الأخير document.getElementById(key) يجب ان يكون document.getElementById("key").

بالمناسبة يمكنك تبسيط هذا قليلاً عن طريق تمرير <input> العنصر مباشرة بدلاً من هويته:

<script type="text/javascript">
function changeMe(angle)
{
    var key = document.getElementById("key");
    key.innerHTML = Math.round(angle.value / 25);
}
</script>

<form method="POST" action="">
Your Angle: <input type="text" name="angle" id="angle" 
    onchange="changeMe(this)" value="0"/>
Key: <span id="key">0</span><br />
</form>

Answer 5

حاول استخدام اقتراح جيمس بلاك للاستخدام onchange="changeMe(this)", ، تصبح وظيفتك مبسطة

function changeMe(x) {
    y = Math.round(x.value/25);
    document.getElementById('key').innerHTML = y;
}

لاحظ ال document.getElementById('key').innerHTML = y, ، سيحل هذا محل HTML الداخلي (كما يصف الاسم) ، وأعتقد أن هذا هو ما تريد استخدامه.