Trying to change value of Textarea (using Skulpt)

90 Views Asked by At

Okay, so I'm using Skulpt to program Python on a webpage. I would like the text in the interpreter change once a button is clicked. But no matter how I try, the code in the text area doesn't change. However, if I 'alert' the value of the text area, it brings up the changed version, indicating that the button works.

I've also found this question: Set value of textarea in jQuery but nothing in here helped in my case :(

Here is how I try it:

    <textarea id="theTextArea">print 'Hello World!'</textarea>
    <div id="controls">
    <button type="button" onclick="replaceCode()">Replace</button>
    <button type="button" onclick="testAlert()">Alert Me</button>
    </div>
    <script>
    function replaceCode(){
        document.getElementById('theTextArea').value = "print 'Thats new code'";
    };
    function testAlert(){
        alert(document.getElementById('theTextArea').value);
    };
    </script>

Also I've tried changing .innerHTML, .text and nothing actually replaced the text in the textarea.

If anyone thinks it could help, I could add the full HTML document with the whole Skulpt setup for online python interpreter, in case it somehow doesn't let me change the value of the textarea in a regular way. But I prefer not to have a wall of code for now if it's not needed for now.

2

There are 2 best solutions below

1
On

You forgot brackets in your onclicks. You should use HTMLTextAreaElement.innerHTML to change the textarea's content

function replaceCode(){
    document.getElementById('theTextArea').innerHTML = "print 'Thats new code'";
};
function testAlert(){
    alert(document.getElementById('theTextArea').innerHTML);
};
<textarea id="theTextArea">print 'Hello World!'</textarea>
<div id="controls">
<button type="button" onclick="replaceCode()">Replace</button>
<button type="button" onclick="testAlert()">Alert Me</button>
</div>

0
On

So it turns out Skulpt was getting in my way of modifying python code on a button click. I needed to use a function which was defined probably in one of the imported documents which come with Skulpt. The function looks like this:

    editor.setValue("print 'Thats new code'");

And then it actually changes in the textarea :)