javscript Returning id value to another function is not working

If I have understood your point, when user clicked on filled/blank box we set its id and when user clicked on blank/filled box we fill blank box with filled innerText and also we unset both id variables to be ready for next round;

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 && 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>

What is thing you are missing is you have to pass an JavaScript event object from your .html file when function is click and catch the event on function parameters you can use the following code:

<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>

My solution

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

JS

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>

There are several ways to solve in a better way, as per I understood this would be the solution what you're expecting .

1. Closure is required to cache the function value and return later when ever needed.

2. same event object reference is representing when you execute the put_value function.

<!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>