Задать вопрос
@Alex931
javascript

Как изменять текст в блоке div через Javascript?

Здравствуйте. Нужно реализовать так, чтобы в блоке div можно было динамически изменять текст. Например, пользователю задают вопрос, и он в этом же div пишет текст, и он заменяет старый. Нашел подобный готовый код, но нужно сделать не таблицей, а вывести либо отдельную форму для ввода текста либо в этом же div писать новый текст.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS Change tag inner Text</title>
    <style>
        #text {
            border: 1px solid rgb(117, 117, 117);
            padding: 5px;
        }
    </style>
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

    <table class="w3-table w3-table-all">
        <tr>
            <th>Модель</th>
            <th>Стоимость</th>
        </tr>
        <tr>
            <td class="editable" data-name="model-1-name">Samsung Galaxy S10</td>
            <td class="editable" data-name="model-1-price">$1000.00</td>
        </tr>
        <tr>
            <td class="editable" data-name="model-2-name">Apple 7 plus</td>
            <td class="editable" data-name="model-2-price">$980.50</td>
        </tr>
        <tr>
            <td class="editable" data-name="model-3-name">Huawei P20 Pro</td>
            <td class="editable" data-name="model-3-price">$750.99</td>
        </tr>
    </table>
    <p><button class="w3-button w3-round w3-yellow" onclick="document.querySelector('#new-field-popup').style.display='block'">+ Add field</button></p>
    <script src="app.js"></script>
</body>
</html>


function TagContentChanger(selector,onBlurCallback)
{
    let elements = document.querySelectorAll(selector);

    function process(element,callback)
    {
        let bg = element.style.background;

        element.addEventListener('click', (event) => {
            element.setAttribute('contenteditable',true);
            element.style.background = "rgb(113, 179, 240)";
        });
   
        element.addEventListener('blur', (event) => {
            if( element.hasAttribute('contenteditable') ) {
                element.removeAttribute('contenteditable',false);
                element.style.background = bg;
                callback(element);
            }
        });
    }

    for(let element of elements) {
        process(element,onBlurCallback);
    }
}


function fillEditables(selector)
{
    let elements = document.querySelectorAll(selector);
    for(let element of elements) {
        let value = localStorage.getItem(element.dataset.name);

        if( !value ) return;
        else element.innerText =  value.trim();

    }

}

fillEditables('.editable');

TagContentChanger('.editable', (element) => {
    localStorage.setItem(element.dataset.name,element.innerText);
});


Так же на codepen ссылка

https://codepen.io/alexanderr-prog/pen/bGLYBoX

Есть идеи, как это можно сделать?
  • Вопрос задан
  • 2848 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
shabyt-eaton
@shabyt-eaton
js, python developer
Динамически текст можно менять обращаясь из JS к id элемента, для этого в любом div элементе, в котором вы хотите менять динамически текст, вы должны присвоить id блоку.
Было:
<td class="editable" data-name="model-1-price">$1000.00</td>

Стало:
<td class="editable" data-name="model-1-price" id = "galaxys10price">$1000.00</td>

Я присвоил элементу таблицы id "galaxys10price", в JS теперь я могу оперировать с ним.
Я написал простенькие функции по изменению цены по нажатию кнопок
Код кнопок:
<button class = "w3-button w3-round w3-yellow"> change price </button>
    <button class = "w3-button w3-round w3-yellow"> return price </button>


Перейдем к JS
let firstPrice = "1000.00" // объявляю переменную начального значения, это не столь важно, для примера сойдет
let galaxyPrice = document.getElementById('galaxys10price') // здесь я получаю один лишь элемент с ID "galaxys10price"
function changeGalaxyPrice(){ 
  galaxyPrice.innerText = "$1200.00" // var.innerText заменяет внутренний HTML текст
}
function returnGalaxyPrice(){
  galaxyPrice.innerText = firstPrice  // тут то же самое что и в первой функции, но я возвращаю, можете покликать
}

После добавления функционала, вы должны в onClick кнопок прописать выполнения этих функции:
<button class = "w3-button w3-round w3-yellow" onclick = changeGalaxyPrice()> change price </button>
    <button class = "w3-button w3-round w3-yellow" onclick = returnGalaxyPrice()> return price </button>

Надеюсь помог, удачи!
Ответ написан
8 комментариев
8 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать CRM/ERP проект на Pure Php + Symfony
26 апр. 2024, в 18:27
200000 руб./за проект
Таргетированная реклама в Tik Tok
26 апр. 2024, в 18:24
80000 руб./за проект
Протестировать виджет на личном сайте
26 апр. 2024, в 18:00
500 руб./за проект
Ещё заказы