Блог

Главная - Вопросы по программированию - я не могу добавить значение после удаления значения текстовой области

я не могу добавить значение после удаления значения текстовой области

#javascript

#javascript

Вопрос:

у меня есть функция js, которая добавляет элемент в текстовую область.

 let article = document.getElementById('article');
function addElement(classname) {
    switch (classname) {
        case 'texttitle':
            let text = '<div classname="texttitle"> nt  <a href=""> nnt </a>n </div>n';
            article.textContent  = text;
            break;
        case 'textvideo':
            let text = '<div classname="textvideo"> nt<iframe src=" " allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""> t</iframe>n</div>n';
            article.textContent  = text;
            break;
        case 'textp':
            let text = '<div classname="textp"> nt<p>nnt </p>n</div>n';
            article.textContent  = text;
            break;
        case 'textimg':
            let text = '<div classname="textimg"> nt<img loading="lazy" src="" alt="Error" />n</div>n';
            article.textContent  = text;
            break;
        case 'textcode':
            let text = '<div class="textcode"> nt<pre id="MainContent"> <code class="language-"> </code></pre>n</div>';
            article.textContent  = text;
            break;
        case 'textquote':
            let text = '<div class="textquote"> nt<blockquote>nt</blockquote>n</div>';
            article.textContent  = text;
            break;
        default:
            article.textContent  = '??';
            break;
    }
} 
 <button class="btn btn-dark articletool" type="button" onclick="addElement('textvideo')">video</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('texttitle')">title</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('textp')">p</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('textimg')">img</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('textcode')">code</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('textquote')">quote</button>

<textarea id="article" class="form-control" placeholder="Article (optional)" cols="30" rows="10"
          name="article"></textarea>

он добавляется до удаления значения текстовой области. я имею в виду, когда я удаляю текст текстовой области

вывод

после удаления. код работает, но не добавляет значения. почему?

Комментарии:

1. Ваш код не работает. Вы объявляли text let много раз в одной и той же switch области. Кроме того, поскольку вы используете .textContent , вы не добавляете «элементы» в textarea , вы просто добавляете неразработанный текст. Если вам нужны фактические элементы, вам нужно использовать .innerHTML , что тоже не самый лучший подход. Вы действительно должны использовать DOM для создания элементов и append() внедрения их в DOM.

2. Спасибо. я решил проблему.

Ответ №1:

вы объявляли text несколько раз и использовали textContent вместо value , это работает:

 <button class="btn btn-dark articletool" type="button" onclick="addElement('textvideo')">video</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('texttitle')">title</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('textp')">p</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('textimg')">img</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('textcode')">code</button>
<button class="btn btn-dark articletool" type="button" onclick="addElement('textquote')">quote</button>

<textarea id="article" class="form-control" placeholder="Article (optional)" cols="30" rows="10"
          name="article"></textarea>
 
 let article = document.getElementById('article');
function addElement(classname) {
    switch (classname) {
        case 'texttitle':
            article.value  =  '<div classname="texttitle"> nt  <a href=""> nnt </a>n </div>n';
            break;
        case 'textvideo':
            article.value  = '<div classname="textvideo"> nt<iframe src=" " allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""> t</iframe>n</div>n';;
            break;
        case 'textp': 
            article.value  = '<div classname="textp"> nt<p>nnt </p>n</div>n';
            break;
        case 'textimg':
            article.value  = '<div classname="textimg"> nt<img loading="lazy" src="" alt="Error" />n</div>n';
            break;
        case 'textcode':
            
            article.value  = '<div class="textcode"> nt<pre id="MainContent"> <code class="language-"> </code></pre>n</div>';
            break;
        case 'textquote':
           
            article.value  = '<div class="textquote"> nt<blockquote>nt</blockquote>n</div>';
            break;
        default:
            article.value  = '??';
            break;
    }
}

Ответ №2:

Попробуйте использовать value свойство вместо textContent для textarea

 article.value  = text;