Как поменять текст в зависимости от выбранного чекбокса используя только javascript?

Question

Нужно создать html-страницу с формой для ввода стилизованного текста. Т.е. стиль уже готового текста должен меняться в зависимости от выбранного чекбокса - bold, italic и/или underline. Можно выбрать как один, так и все 3. Ошибки не выдает, но и стиль не меняет.

Есть еще radio, но пока еще не дошла до них.

<div class="container">
            <div class="style">
                <input type="checkbox" id="bold" style="font-weight: bold">
                <label for="bold">Bold</label>
                <input type="checkbox" id="underline" style="text-decoration: underline">
                <label for="underline">Underline</label>
                <input type="checkbox" id="italics" style="font-style: italic">
                <label for="italics">Italics</label>
                <input type="radio" name="radio_button" class="left">
                <label for="radio_button">Left</label>
                <input type="radio" name="radio_button" class="right">
                <label for="radio_button">Right</label>
                <input type="radio" name="radio_button" class="justify">
                <label for="radio_button">Justify</label>
            </div>
            <textarea type="text" name="message">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </textarea>
            <button type="button">Show text</button>

        </div>

    <script> 

        let btn = document.querySelector("button");
        let text = document.querySelector("textarea");

        btn.addEventListener("click", function(){
            let checkbox = document.querySelectorAll('input[type="checkbox"]');


            let styleCheckbox = document.querySelector('[style]').getAttribute('style'); 


            for (let elem of checkbox) {

             if(elem.checked) {
                  text.style = elem.styleCheckbox;

              }  
            };
        });

Answer 1

Здесь записываются стили каждого checkbox в строку style , разделяемую ; , а уже эта строка назначается elem.style. В разметке html добавлены предполагаемые стили для input[type=radio], как и обработка их в скрипте.

let btn = document.querySelector("button");
let text = document.querySelector("textarea");

btn.addEventListener("click", function(){
    let checkbox = document.querySelectorAll('input[type="checkbox"], input[type="radio"]');
    // Назначаем `text.style` конкатенацию всех атрибутов `style` `checkbox`, которые `checked`:
    text.style = [...checkbox].filter(c => c.checked).reduce((a,b) => a + b.getAttribute('style') + ';', '');         

});

textarea {
  width: 500px;
  height: 140px;
}

<div class="container">
<label>
	<input type="checkbox" style="font-weight: bold">
	<span>Bold</span>
</label>
<label>
	<input type="checkbox" style="text-decoration: underline">
	<span>Underline</span>
</label>
<label>
	<input type="checkbox" style="font-style: italic">
	<span>Italics</span>
</label>

<label>
	<input type="radio" name="r" style="text-align: left">
	<span>Left</span>
</label>
<label>
	<input type="radio" name="r" style="text-align: right">
	<span>Right</span>
</label>
<label>
	<input type="radio" name="r" style="text-align: justify">
	<span>Justify</span>
</label>
<br>
<textarea type="text" name="message">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</textarea>
<button type="button">Save</button>
</div>

Для бОльшей наглядности добавил стили в textarea.

БЛОГ НА HUSL

Как поменять текст в зависимости от выбранного чекбокса используя только javascript?

Ответы (1 шт):