Создать меню опций в JavaScript

0

Я делаю игру Soduko в HTML и javascript. Я хочу, чтобы пользователь выбирал числа (0 - 9) вместо их ввода.

Вот пример для одного входа (ячейка 0: 0):

<td><input id="c00" type="text" size="1" onclick="validate()"/></td>

Я хотел бы, чтобы код javascript отображал опцию 0-9, когда эта ячейка нажата.

Моя идея такова.

if oncliked()
then display menu
document.getElementById("c00").value = selected value.
  • 2
    Почему вы просто не используете тег select вместо input ?
  • 0
    Мысль об этом, но это не выглядит профессионально на всех. Это даже утомило бы ребенка.
Показать ещё 3 комментария
Теги:

1 ответ

0

Вы должны использовать классы вместо идентификаторов для вашего события click, например:

<td><input class="number-select" type="text" id="c00" size="1"/></td>

Затем вы можете связать их со всеми из них в jQuery:

$("input.number-select").click(function(){
    $("#tile-chooser").show();    
    ...
}

Внутри этого обратного вызова вы можете использовать

$(this).val() 

для получения или установки значения текстового поля.

Также при click вы должны показать свой селектор чисел. Вы можете сделать это, создав div с атрибутом data-input-id где вы будете хранить id текстового поля для заполнения.

Затем в этом div вы можете создать 10 divs с цифрами на них и специальный класс, например, digit-tile и прикрепить к ним обратный вызов:

$("div.digit-tile").click(function() {
    var inputId = $(this).parent().data("input-id");
    $("#" + inputId).val($(this).data("value"));
    $(this).parent().hide();
}

Ваши плитки могут выглядеть так:

<div id="tile-chooser" style="display:none">
    <div class="digit-tile" data-value="1">1</div>
    ...
</div>

Добавьте CSS для этого, чтобы хорошо выглядеть, и он должен работать.

Последнее, что вам нужно добавить, это позиционирование div с черепицей, поэтому оно будет близко к текстовому поле, но это выходит за рамки этого вопроса, я думаю.

  • 0
    Дело в том, что я новичок в сети. Извинения, забыл упомянуть, мы должны использовать только чистый JavaScript. Снова извиняюсь за включение тега Jquery. Но спасибо за ввод. Я постараюсь преобразовать это в JavaScript.
  • 0
    Если вы не используете jQuery, вы получите больше кода, но идея будет та же. Если вы новичок в JS, HTML и CSS, то вам все равно нужно исследовать такие темы, как абсолютное позиционирование CSS, скрытие / отображение элементов со стилями и т. Д. Если у вас есть полное рабочее решение, оно все равно будет бесполезным, если вы не в состоянии изменить его в соответствии с вашими требованиями.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню