Изменение innerHTML для значения из идентификатора div, захваченного его классом

У меня есть несколько кнопок 1-9, и я хочу показать их номера на div, называемом «screen». Поэтому я написал такой код, но он не работает.Изменение innerHTML для значения из идентификатора div, захваченного его классом

Часть HTML кода с этими кнопками:

<div id="screen"></div> 

    <div><input type="submit" class="numKey" id="key7" value="7" onclick="enterPIN();"></div> 
    <div><input type="submit" class="numKey" id="key8" value="8" onclick="enterPIN();"></div> 
    <div><input type="submit" class="numKey" id="key9" value="9" onclick="enterPIN();"></div> 
     <div style="clear: both;"></div> 
    <div><input type="submit" class="numKey" id="key4" value="4" onclick="enterPIN();"></div> 
    <div><input type="submit" class="numKey" id="key5" value="5" onclick="enterPIN();"></div> 
     (... AND SO ON ...)

JavaScript код:

function enterPIN() 
{ 
    for (i=0; i<document.getElementsByClassName("numKey").length; i++) 
    { 
     var numKeyId = i + " " + document.getElementsByClassName("numKey")[i].id; 
     console.log(numKeyId); 
     return numKeyId; 

    } 

    var getElementId = function(numKeyId) 
    { 
     this.numKeyId = numKeyId; 
     document.getElementById("screen").innerHTML = document.getElementsByClassName("numKey")[numKeyId].id; 
     console.log("Asdasdasd"); 
    } 
    getElementId(); 
}

Он должен работать так:

источник

2015-08-07 Chris92

Есть ли причина, по которой вы не просто передаете значение, которое хотите отобразить напрямую, как в 'onclick =" enterPIN (4); '? –

Является ли это просто мной или вы ошиблись в numKeyId? EDIT2: Если вы не хотите ставить 'enterPIN (4),' как Дэниел предложил, почему, я думаю, что это просто конец, и я просто закончил свою работу. не полагайтесь на 'this' больше? просто получите значение и положите в' element.innerHTML + = "4" '? – NemanjaT

Посмотрите на this example

window.onload = function(){ 
    var MAX_LEN = 4, 
     currentValue = "", 
     elScreen = document.getElementById('screen'), 
     addDigit = function(digit){ 
      digit = digit instanceof MouseEvent ? this.value : digit; 
      if (elScreen.innerHTML.length < MAX_LEN) elScreen.innerHTML += digit; 
     }, 
     delDigit = function(){ 
      elScreen.innerHTML = elScreen.innerHTML.slice(0,elScreen.innerHTML.length - 1); 
     }; 
    //setting handlers for numKeys 
    numBtns = document.getElementsByClassName('numKey'); 
    for (var i = 0 ; i < numBtns.length; i++) numBtns[i].onclick = addDigit; 
    //setting handler for backKey 
    document.getElementById('backKey').onclick = delDigit; 
}

Do сначала не думайте о обработчиках событий. Напишите простые функции addDigit и delDigit, а затем вызовите их из обработчиков.

источник

2015-08-07 22:55:27

Спасибо за дополнительную функцию удаления. – Chris92

Самое простое решение пройти this.value в параметрах функции onclick (как предполагает @DanielBeck):

<input type="button" value="1" onclick="enterPIN(this.value)"/>

Это намного проще, чем пытаться вытащить кнопку, которая была нажата, когда эта информация может быть непосредственно доставлено.

источник

2015-08-07 21:58:54 bcdan

Да, это работает - спасибо @ Daniel Black - но так как я написал такую функцию для вывода всех этих номеров значений кнопок.Как это сделать для цикла и так далее, как мой код пытается сделать :)? Как правильно написать свой код, чтобы он работал? – Chris92

Ну, если вам просто нужно его для вывода, что вы щелкаете, почему бы не сделать что-то вроде

<html> 
    <body> 
     <script> 
     function enterPIN(value) 
     { 
      document.getElementById('screen').innerHTML += String(value); 
     } 

     </script> 

     <div id="screen"></div> 

     <div><input type="submit" class="numKey" id="key7" value="7" onclick="enterPIN(this.value);"></div> 
     <div><input type="submit" class="numKey" id="key8" value="8" onclick="enterPIN(this.value);"></div> 
     <div><input type="submit" class="numKey" id="key9" value="9" onclick="enterPIN(this.value);"></div> 

    </body> 
</html>

источник

2015-08-07 22:01:51 Nathu

В первый раз за итерацию цикла (с i=0), он получит в return заявление и функции выйдет после одной итерации, никогда не дойдя до последней части скрипта.

Это может быть сделано с меньшим количеством кода, если вы просто изменить HTML немного, поставив значение в качестве аргумента enterPin:

<input type="button" class="numKey" id="key7" value="7" onclick="enterPIN(7);">

Или, как это было предложено bcdan, используя this таким образом Вы не «т придется повторять себя:

<input type="button" class="numKey" id="key7" value="7" onclick="enterPIN(this.value);">

Обратите внимание, что я изменился с submit до button, так как вы на самом деле не хотите, чтобы отправить форму после того, как нажатие кнопок. Тогда вам просто нужно это JS:

function enterPin(number) { 
    screen = document.getElementById("screen"); 
    screen.innerHTML = screen.innerHTML + String(number); 
}

Или, если вы хотите использовать JQuery (и избавиться от атрибута onclick):

$(".numKey").click(function() { 
    screen = $("#screen"); 
    screen.html(screen.html + this.value); 
});

источник

2015-08-07 22:06:16 Anders

Изменение innerHTML для значения из идентификатора div, захваченного его классом

ответ

Смежные вопросы