Javascript Code to disable toolbar not getting disabled

Need help
1

HI,
I am preparing an application in which I have a checkbox to select. Then below it I have a symbol toolbar to select a particular math symbol. Then below this I have a multiline input box where the symbol gets displayed. I am attaching a screenshot below for this: -

image
image711×321 10.2 KB

I have an HTML element in my application with the following code:

+ - × ÷ = ≠ < > ≤ ≥ √ ∛ ^2 π θ ∑
a₁ n d ° ∥ △ ~ ∫ | y² x² x³ ∠ b² Sₙ

#math-symbol-toolbar { width: 100%; background-color: #0080ff; padding: 3px 3px 3px 7px; border-radius: 8px; } .symbol-container { display: flex; flex-direction: column; } .symbol-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; } .symbol-row button { background-color: #f8f8f8; border: 1px solid #d0d0d0; border-radius: 4px; padding: 4px 8px; cursor: pointer; transition: background-color 0.2s ease; font-size: 13px; } .symbol-row button:hover { background-color: #e0e0e0; }

Some how this code is not working properly. I will explain below: -

  • When I click a symbol for the first time it gets displayed in the multiline input box. But when I click on another symbol it erases the first one. I do not want that. I want the next symbol to append the previous one.
  • The interesting part is that when I check the checkbox it works perfectly. But this is not what I want. I want when the user check the checkbox the symbol toolbar gets disabled and the user is not able to enter any symbol in the Input box.

I have set ID attributes for the checkbox (disable_toolbar_checkbox) and the multiline input box (mathInput).

I am not able to find as to why this happening. I would appreciate if someone can help me with their expertise.

Hoping to hear back soon.

Thanks
Vijay