javscript, возвращающий значение идентификатора другой функции, не работает

ProgramBox

javscript, возвращающий значение идентификатора другой функции, не работает

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

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

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    div {
      cursor: pointer;
      display: inline-block;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="item" id="su1" style="border: 1px solid powderblue;" onclick="change_id()"></div>
  <div class="item" id="su2" style="border: 1px solid powderblue;" onclick="change_id()"></div>
  <div class="item" id="su3" style="border: 1px solid powderblue;" onclick="change_id()"></div>

  <div class="number" id='num1' style="border: 1px solid powderblue;" onclick="put_value()">1</div>
  <div class="number" id='num2' style="border: 1px solid powderblue;" onclick="put_value()">2</div>
  <div class="number" id='num3' style="border: 1px solid powderblue;" onclick="put_value()">3</div>

  <script>
    function change_id() {
      var idname = event.target.getAttribute('id');
      return idname;
    }

    function put_value() {
      var get_num_id = event.target.getAttribute('id');
      var num = document.querySelector('#'   get_num_id);
      document.querySelector('#'   change_id()).textContent = num.textContent;
    };
  </script>
</body>

</html>

Ответ №1:

Чего вам не хватает, так это того, что вам нужно передать объект события JavaScript из вашего файла .html, когда функция щелкает и перехватывает событие в параметрах функции. вы можете использовать следующий код:

 <div class="item" id="su1" style="border: 1px solid powderblue;" onclick="change_id(e)"></div>
<div class="item" id="su2" style="border: 1px solid powderblue;" onclick="change_id(e)"></div>
<div class="item" id="su3" style="border: 1px solid powderblue;" onclick="change_id(e)"></div>

<div class="number" id='num1' style="border: 1px solid powderblue;" onclick="put_value(e)">1</div>
<div class="number" id='num2' style="border: 1px solid powderblue;" onclick="put_value(e)">2</div>
<div class="number" id='num3' style="border: 1px solid powderblue;" onclick="put_value(e)">3</div>

<script>

 var changedId = null; // we create a variable which stored the changed id value

 function change_id(event){
  changedId = event.target.getAttribute('id');
 }

 function put_value(event){
  var get_num_id = event.target.getAttribute('id');
  var num = document.querySelector('#' get_num_id);
  document.querySelector(`#${changedId}`).textContent = num.textContent;
 };
</script>

1. Большое спасибо! Теперь это работает :))) я не знал, что я должен использовать ‘null’. Не возражаете, если я задам еще один вопрос? Почему я не могу использовать return для получения значения идентификатора?

2. Установка null вы можете использовать пустую строку или любые другие вещи для инициализации переменной, поскольку, насколько я знаю, инициализировать переменную подобным образом не рекомендуется var changedId; мы должны сохранять любые вещи, такие как null или пустые строки или начальное значение.

3. Теперь по вашему вопросу: когда вы вызываете функцию change_id(event) , для этого требуется фактический элемент item, который вы получаете из события JavaScript при нажатии на элемент item , поэтому, если вы нажмете на элемент item, он сохранит идентификатор последнего нажатого элемента глобально, а при нажатии на элемент number он заменит его.

Ответ №2:

Если я понял вашу точку зрения, когда пользователь нажимает на заполненное / пустое поле, мы устанавливаем его идентификатор, а когда пользователь нажимает на пустое / заполненное поле, мы заполняем пустое поле заполненным innerText , а также отключаем обе id переменные, чтобы быть готовыми к следующему раунду;

 let suId, numId;

function change_id() {
    suId = event.target.getAttribute('id');
    fill();
}

function put_value() {
    numId = event.target.getAttribute('id');
    fill();
};

function fill() {
  if (suId amp;amp; numId) {
    document.getElementById(suId).innerText = document.getElementById(numId).innerText;
    suId = null;
    numId = null;
  }
}

 div {
  cursor:pointer;
  display: inline-block;
  padding: 10px;
  border: 1px solid powderblue
}

 <div class="item" id="su1" onclick="change_id()"></div>
<div class="item" id="su2" onclick="change_id()"></div>
<div class="item" id="su3" onclick="change_id()"></div>

<div class="number" id='num1' onclick="put_value()">1</div>
<div class="number" id='num2' onclick="put_value()">2</div>
<div class="number" id='num3' onclick="put_value()">3</div>

Ответ №3:

Мое решение

https://jsfiddle.net/9wovdsup/1/

 let app = function() {
    this.cellSelected = false
  this.$btns = document.querySelector('.btns');
  this.$items = document.querySelector('.items');
  this.$items.querySelectorAll('.item').forEach(el => {
    el.addEventListener('click', (e) => {
      this.selectCell(e.currentTarget);
      this.checkSelected();
    });
  });
  

  this.$btns.querySelectorAll('.btn').forEach(el => {
    el.addEventListener('click', (e) => {
        if(this.cellSelected) {
        this.cellSelected.innerText = e.currentTarget.innerText
      }
    });
  });
}
app.prototype.checkSelected = function(el) {    
  this.$btns.querySelectorAll('.number').forEach(el => {
        if(this.cellSelected) {
        el.setAttribute('tabindex', 0);
      el.removeAttribute('aria-disabled');
    } else {
        el.setAttribute('tabindex', -1);
      el.setAttribute('aria-disabled', true);
    }
  });  
}
app.prototype.selectCell = function(el) {
    if(this.cellSelected) {
        this.cellSelected.setAttribute('tabindex', -1);
      this.cellSelected.classList.remove('selected');
      if(this.cellSelected == el) {
        this.cellSelected = false;
        return
      }
    }
        el.classList.add('selected');
    el.setAttribute('tabindex', 0);
    this.cellSelected = el;
}

new app;

HTML

   <div class="items">
    <div tabindex="-1" class="item"></div>
    <div tabindex="-1" class="item"></div>
    <div tabindex="-1" class="item"></div>
  </div>
  
  <div class="btns">
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">1</div>
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">2</div>
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">3</div> 
  </div>

Ответ №4:

Есть несколько способов решить проблему лучшим образом, как я понял, это будет то решение, которое вы ожидаете.

Закрытие требуется для кэширования значения функции и возврата позже, когда это когда-либо потребуется.
при выполнении функции put_value отображается та же ссылка на объект события.

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    div {
      cursor: pointer;
      display: inline-block;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="item" id="su1" style="border: 1px solid powderblue;" onclick="change_id()"></div>
  <div class="item" id="su2" style="border: 1px solid powderblue;" onclick="change_id()"></div>
  <div class="item" id="su3" style="border: 1px solid powderblue;" onclick="change_id()"></div>

  <div class="number" id='num1' style="border: 1px solid powderblue;" onclick="put_value()">1</div>
  <div class="number" id='num2' style="border: 1px solid powderblue;" onclick="put_value()">2</div>
  <div class="number" id='num3' style="border: 1px solid powderblue;" onclick="put_value()">3</div>

  <script>
    function change_id() {
    var idname = event.target.getAttribute('id');
    if(idname.indexOf('su') == -1){
        return change_id['cache'];
    }else{
        change_id['cache'] = idname;
    }
    }

    function put_value() {
      var get_num_id = event.target.getAttribute('id');
      var num = document.querySelector('#'   get_num_id);
    var change_id_val = change_id()
    if(change_id_val ){
            document.querySelector('#'   change_id_val).textContent = num.textContent;
    }
    };
  </script>
</body>

</html>

1. Могу ли я спросить вас, что такое [‘cache’] в change_id[‘cache’]? или я могу получить ссылку?

2. Ну, функции также являются объектами, поэтому мы можем хранить информацию аналогично объектам, но к ней должен быть доступ, в квадратных скобках присваивается доступ к свойству: object[‘свойство’] Здесь кэш — это свойство в объекте функции (change_id) , вот как работает закрытие. Этот метод рассматривается как запоминание.