how to create a script of an arab keyboard?

Question

i tried to create an arabic keyboard script, i want when i click on a letter it displays in texterea field, i don't know how to start. I added an onclick = "alpha ('ز')" function but I don't know how to use.

<style type="text/CSS">
    #Layer1 {
    position:absolute;
    left:263px;
    top:100px;
    width:176px;
    height:147px;
    z-index:1;
    }
  </style>

<div id="Layer1">
    <div class="form-group">
        <label>Clavier Arab <span class="text-hightlight"></span></label>
        <textarea type="text" name="description" class="form-control" dir="rtl" style="height: 200px;width:850px;" placeholder="أكتب بالعربية" />
        </textarea>
    </div>
    <table width="100%" height="100%">
      <tbody>
        <tr>
          <td valign="middle">
            <table width="100%" align="center" style="border:3px #009900 double" bgcolor="#FFFFFF">
              <tbody>
                <tr>
                  <td colspan="2">
                    <table width="100%" cellpadding="10" cellspacing="10" align="center">
                      <tbody>

                        <tr align="center">
                          <td>
                            <input width="100%" type="button" value="ض" onclick="alpha('ض')" class="btn btn-outline-primary">
                          </td>
                          <td>
                            <input type="button" value=" ز " onclick="alpha('ز')" class="btn btn-outline-primary">
                          </td>
                          <td>
                            <input type="button" value=" ر " onclick="alpha('ر')" class="btn btn-outline-primary">
                          </td>
                        </tr>

                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 1

Event Delegation is more suited to this task than providing individual event listeners on keyboard buttons using HTML onclick attributes.

The code snippet provides a worked example of adding clicked character buttons to textarea content, but may need changes to better meet your requirements and coding standards:

document.getElementById("clavier").addEventListener("click", event => {
    const target = event.target;
    if( target.classList.contains("btn")) {
        keyClick(target.value);
    }
});
const textarea = document.querySelector("#Layer1 textarea");

function keyClick(key) {
    textarea.value += key;
}

<style type="text/CSS">
    #Layer1 {
    position:absolute;
    left:263px;
    top:100px;
    width:176px;
    height:147px;
    z-index:1;
    }
  </style>

<div id="Layer1">
    <div class="form-group">
        <label>Clavier Arab <span class="text-hightlight"></span></label>
        <textarea type="text" name="description" class="form-control" dir="rtl" style="height: 200px;width:850px;" placeholder="أكتب بالعربية"></textarea>
    </div>
    <table width="100%" height="100%" id="clavier">
      <tbody>
        <tr>
          <td valign="middle">
            <table width="100%" align="center" style="border:3px #009900 double" bgcolor="#FFFFFF">
              <tbody>
                <tr>
                  <td colspan="2">
                    <table width="100%" cellpadding="10" cellspacing="10" align="center">
                      <tbody>

                        <tr align="center">
                          <td>
                            <input width="100%" type="button" value="ض" class="btn btn-outline-primary">
                          </td>
                          <td>
                            <input type="button" value="ز" class="btn btn-outline-primary">
                          </td>
                          <td>
                            <input type="button" value="ر" class="btn btn-outline-primary">
                          </td>
                        </tr>

                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 2

// Get the textarea
let textarea = document.getElementById('textarea');

(function(){
    
    // Array to hold the HTML output (in this case: alphabet letters (buttons))
    let output = [];

    function drawAlphabet(){
    // foreach letter create a button
        arabicAlphabet.forEach(letter => {
            let alphabetBtn = `<button value="${letter}" class="alphabetBtn">${letter}</button>`;
            output.push(alphabetBtn);
        });
        
        // Push the buttons to the #buttons-container
        btnsContainer.innerHTML = output.join('');
    }
    
    // Get the buttons container
    let btnsContainer = document.getElementById('buttons-container');
    // The Arabic alphabet array
    const arabicAlphabet =["ي", "و", "ه", "ن", "م", "ل" ,"ك", "ق", "ف", "غ", "ع", "ظ", "ط", "ض", "ص", "ش" ,"س", "ز", "ر", "ذ", "د", "خ", "ح", "ج", "ث", "ت", "ب", "أ"];
    
    // Run the function
    drawAlphabet();
})();

// Get the buttons 
let myBtns = document.querySelectorAll('.alphabetBtn');

// foreach clicked button, add it's value to the textarea
myBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        textarea.innerHTML += btn.getAttribute("value");
    });
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 10px;
    font-family: 'Arial', sans-serif;
}

a, button {
    text-decoration: none;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
}

#textarea {
    width: 500px;
    height: 200px;
    margin-bottom: 30px;
    direction: rtl;
    padding: 10px;
    font-size: 1.2rem;
}

.alphabetBtn {
    font-size: 1.5rem;
    width: 50px;
    margin: 2px 2px;
}

<div class="wrapper">
    <textarea id="textarea"></textarea>
    <div id="buttons-container"></div>
</div>