Удаление завершающего письма из textarea JS Function - PullRequest
0 голосов
/ 05 ноября 2018

Я создал приложение SPA Translator, используя API Яндекса. Я только что закончил логику и функциональность моего приложения, но я застрял на том, как удалить завершающую букву в моей выходной текстовой области, когда пользователь удаляет весь текст из входной текстовой области.

Как написать функцию для очистки выходной текстовой области обратно в ('') пустую строку после того, как пользователь удалил весь введенный текст. Ссылка на мой живой сайт находится здесь (https://translex -app-shanemuir.c9users.io / dist / index.html ).

Здесь у меня есть HTML-форма:

            <div class="container myForm text-center">
                <div class="row row-center">
                    <div class="col-sm-12">
                        <form class="form-inline well justify-content-center">
                            <textarea id="inputText" class="form-control" placeholder="Enter a Word..."></textarea>
                            <select class="form-control" id="selectLang">
                             <option selected>Choose Language...</option>
                            </select>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <h2 class="translation-header">Translation</h2>
                        <form class="form-inline well justify-content-center">
                            <textarea readonly class="form-control" placeholder="Translation" id="translation"></textarea>
                        </form>
                    </div>
                </div>
            </div>

Здесь у меня есть JS:

let searchInput = document.querySelector('#inputText');
let select = document.querySelector('#selectLang');
let textArea = document.querySelector('#translation');
let selectedLang = 'es';

function getLanguages(){
    axios.get('https://translate.yandex.net/api/v1.5/tr.json/getLangs?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&ui=en')
    .then((response) => {
        let languages = response.data.langs;
        let languageCode = {
            name:'',
            code:''
        };
        for(language in languages) {
            languageCode.name = languages[language];
            languageCode.code = language;
            let option = document.createElement('option');
            option.innerHTML = languageCode.name;
            option.value = languageCode.code;
            select.appendChild(option);
        }
    })
    .catch((err) => {
        console.log(err);
    });
}

function translateText(textArg){
    let searchText;
    if(textArg == ''){
        searchText = document.querySelector('#inputText').value;
    }
    else{
        searchText = textArg;
    }

    if(searchText != ''){
        axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&lang=' + selectedLang + '&text=' + searchText)
        .then((response) => {
            let translateInput = document.querySelector('#translation');
            translateInput.value = response.data.text[0];
        })
        .catch((err) => {
            console.log(err);
        });
    }
}


searchInput.addEventListener('keyup',() => {
    translateText('');
});

select.addEventListener('change',() => {
    selectedLang = select.options[select.selectedIndex].value;
    translateText('');
});


getLanguages();

1 Ответ

0 голосов
/ 05 ноября 2018

Добавьте предложение else к if, чтобы очистить текстовую область.

if(searchText != ''){
    axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&lang=' + selectedLang + '&text=' + searchText)
    .then((response) => {
        let translateInput = document.querySelector('#translation');
        translateInput.value = response.data.text[0];
    })
    .catch((err) => {
        console.log(err);
    });
} else {
    document.querySelector('#translation').value = '';
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...