js如何定义函数修改指定文本框内容

<SCRIPT LANGUAGE="JavaScript">
function smallface(str)
{

document.all.str.value = "呃呃"
}
</SCRIPT>

<A HREF="javascript:smallface('contexts')">回复</A><br>

内容: <br><textarea name="contexts" rows="17" cols="75" style="resize:none;"></textarea><br>

我这样写了以后无法修改，应该怎么改啊，就是我定义的这个函数，我想输入指定文本框名后修改文本框内容，但是输入以后无法识别

输入 22自动转换


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="contexts" id="str" rows="17" cols="75" style="resize:none;" oninput="change()"></textarea>
</body>
<script>

    function change() {
        let text = document.getElementById("str");
        let val=text.value;
        if (val == "22") {
            text.value = "88"
        }
    }
</script>

</html>