Webview и работа с ним

Я тут глупенький. У меня есть webview, которая открывает html файл. Вот:

<div id="app">
<svg viewBox="0 0 60 60">
    тут описание svg
</svg>
<div class="main-container">
    <span class="cell" onclick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
</div>
<span class="again" onclick="again()">
    <svg viewBox="0 0 435 435">
         тут описание svg
    </svg>
</span>

<script>
let cells = document.getElementsByClassName('cell'),
    cross = document.querySelector('#cross'),
    circle = document.querySelector('#circle'),
    cc = [cross, circle], counter = 0, cClass = ['cross', 'circle'];
turn = function (a) {
    if (!a.classList.contains('disable')) {
        a.classList.add('disable');
        a.classList.add(cClass[counter % 2]);
        tmp = cc[counter % 2].cloneNode(true);
        a.appendChild(tmp);
        counter++;
        if (winCheck()) again();
    }
}
winCheck = function () {
    for (let i = 0; i < 3; i++) {
        if (cells[0 + i * 3].innerHTML === cells[1 + i * 3].innerHTML &&
            cells[0 + i * 3].innerHTML === cells[2 + i * 3].innerHTML &&
            cells[0 + i * 3].innerHTML !== '') return true;
        if (cells[0 + i].innerHTML === cells[3 + i].innerHTML &&
            cells[0 + i].innerHTML === cells[6 + i].innerHTML &&
            cells[0 + i].innerHTML !== '') return true;
    }
    if (cells[0].innerHTML === cells[4].innerHTML &&
        cells[0].innerHTML === cells[8].innerHTML &&
        cells[0].innerHTML !== '') return true;
    if (cells[2].innerHTML === cells[4].innerHTML &&
        cells[2].innerHTML === cells[6].innerHTML &&
        cells[2].innerHTML !== '') return true;
}
again = function () {
    for (let i = 0; i < 9; i++) {
        cells[i].innerHTML = '';
        cells[i].classList.remove('disable');
        cells[i].classList.remove('cross');
        cells[i].classList.remove('circle');
    }
    counter = 0;
}
</script>

Вот код с того html файла. А вот код java:

public class MainActivity extends AppCompatActivity {
public WebView myWeb;
public class WebAppInterface{
    Context mContext;
    String string;
    WebAppInterface(Context c) { mContext = c;}
    @JavascriptInterface
    public void showToast(){
        Toast.makeText(mContext, "1111", Toast.LENGTH_SHORT).show();
    }
}
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    myWeb = (WebView) findViewById(R.id.webView);
    myWeb.getSettings().setUseWideViewPort(true);
    myWeb.setInitialScale(1);
    WebSettings webSettings = myWeb.getSettings();
    webSettings.setJavaScriptEnabled(true);
    myWeb.getSettings().setJavaScriptEnabled(true);
    myWeb.loadUrl("file:///android_asset/index.html");
    myWeb.addJavascriptInterface(new WebAppInterface(this),"Android");
}
}

Так вот. Я не могу взаимодействовать с своими ячейками. Onclick не работает в webview (в браузере норм). Более того, на span с классом again он выдает ошибку Uncaught ReferenceError: again is not defined, но на другие нет. Как мне это исправить?