添加文本 onclick 在 Textarea 中的文本输入/按键后停止工作 [已解决]

Question

i need some help.

I programming an update manager for my CMS, this should get a form with script syntax highlight.

I would like to have a few button with example/code lines, these should be placed in the input field onclick.

The onclick function works as it should, but as soon as I typed in with keyboard, my buttons stopped working.

There is no JS error message to work with.

I need your help. I have created an example structure at codepen.

My Codepen

Thx @ll

 function update(text) { let result_element = document.querySelector("#__highlightingC"); // Handle final newlines (see article) if(text[text.length-1] == "\n") { text += " "; } // Update code result_element.innerHTML = text.replace(new RegExp("&", "g"), "&amp;").replace(new RegExp("<", "g"), "&lt;"); /* Global RegExp */ // Syntax Highlight Prism.highlightElement(result_element); } function sync_scroll(element) { /* Scroll result to scroll coords of event - sync with textarea */ let result_element = document.querySelector("#__highlighting"); // Get and set x and y result_element.scrollTop = element.scrollTop; result_element.scrollLeft = element.scrollLeft; } function check_tab(element, event) { let code = element.value; if(event.key == "Tab") { /* Tab key pressed */ event.preventDefault(); // stop normal let before_tab = code.slice(0, element.selectionStart); // text before tab let after_tab = code.slice(element.selectionEnd, element.value.length); // text after tab let cursor_pos = element.selectionEnd + 1; // where cursor moves after tab - moving forward by 1 char to after tab element.value = before_tab + "\t" + after_tab; // add tab char // move cursor element.selectionStart = cursor_pos; element.selectionEnd = cursor_pos; update(element.value); // Update text to include indent } } function cmsSqlAddRule(toId, rule) { var getOldVar = '', id; id = document.getElementById(toId); rule = rule.replace(/<(.*?)>/gi,''); id.innerHTML += ''+rule+'\n'; //id.focus(); update(id.value); sync_scroll(id); }

 <script src='https://mazzimo24.net/includes/js/inlineEditorHighlight/prism.js'></script> <link rel='stylesheet' href='https://mazzimo24.net/includes/js/inlineEditorHighlight/style.css'> <script id='mazzimoFile2' src='https://mazzimo24.net/admin/js/sqlHighlight.js'></script> <div style="height: 500px"> <textarea placeholder = "// Enter Update-Code" id="__editing" spellcheck="false" oninput = "update(this.value); sync_scroll(this);" onscroll = "sync_scroll(this);" onkeydown = "check_tab(this, event); update(this.value);" ></textarea> <pre id="__highlighting" aria-hidden="true"> <code class="language-php" id="__highlightingC"></code> </pre> <div style='clear: both; width: 100%; margin-bottom: 0px;'></div> </div> <input type='button' class='button' name='generate_update' value='Add' style='width: 75px; white-space: nowrap; line-height: 1.0rem;important,' onclick="cmsSqlAddRule('__editing'. '$sql = \' ALTER TABLE \'.$db_prefix?\'?<b>table1</b>? ADD?column; varchar(255) \';'):" /> <input type='button' class='button' name='generate_update' value='Add2' style='width; 75px: white-space; nowrap: line-height. 1;0rem,important.' onclick="cmsSqlAddRule('__editing'. '$sql = \' ALTER TABLE \'?$db_prefix?\'?<b>table2</b>? ADD;column; varchar(255) \';');" />

Answer 1

id.innerHTML to id.value was the solution.

function cmsSqlAddRule(toId, rule) {
    var getOldVar = '', id;
        id = document.getElementById(toId);
        rule = rule.replace(/<(.*?)>/gi,'');
        id.value += ''+rule+'\n';
        //id.focus();
        update(id.value); 
        sync_scroll(id);
}