כפתורים שבלחיצה יעשו משהו

העזרן הראשי

פוסט זה נמחק!

שמח לעזור

@יודלה אמר בכפתורים שבלחיצה יעשו משהו:

ואני רוצה להוסיף כפתור שיהפוך את הכתב ל <H1>

שזה אומר?

תגית אבל עזוב אם אתה לא מבין לא יצא לך מזה הרבה...

מוטי אורן

@שמח-לעזור אוקיי, עכשיו הבנתי אותך.. כבר מעדכן

מוטי אורן

@שמח-לעזור יש לך פה קוד HTML משולב JS שעושה את זה.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text editor</title>
</head>

<body>
    <button id="toH1">Convert to H1</button>
    <button id="toH2">Convert to H2</button>
    <button id="toH3">Convert to H3</button>
    <button id="toH4">Convert to H4</button>
    <button id="toH5">Convert to H5</button>
    <button id="toH6">Convert to H6</button>
    <div id="container">
        <div id="editor" contenteditable="true" style="min-height: 100vh; border: none; outline: none;"></div>
    </div>
    <script>
        let container = document.getElementById('container');
        let editor = document.getElementById('editor');
        document.querySelector('#toH1').addEventListener('click', function () {
            editor = document.getElementById('editor');
            container.innerHTML = `<h1 id="editor" contenteditable="true" style="min-height: 100vh;  border: none; outline: none;">${editor.innerText}</h1>`;
        })
        document.querySelector('#toH2').addEventListener('click', function () {
            editor = document.getElementById('editor');
            container.innerHTML = `<h2 id="editor" contenteditable="true" style="min-height: 100vh;  border: none; outline: none;">${editor.innerText}</h2>`;
        })
        document.querySelector('#toH3').addEventListener('click', function () {
            editor = document.getElementById('editor');
            container.innerHTML = `<h3 id="editor" contenteditable="true" style="min-height: 100vh;  border: none; outline: none;">${editor.innerText}</h3>`;
        })
        document.querySelector('#toH4').addEventListener('click', function () {
            editor = document.getElementById('editor');
            container.innerHTML = `<h4 id="editor" contenteditable="true" style="min-height: 100vh;  border: none; outline: none;">${editor.innerText}</h4>`;
        })
        document.querySelector('#toH5').addEventListener('click', function () {
            editor = document.getElementById('editor');
            container.innerHTML = `<h5 id="editor" contenteditable="true" style="min-height: 100vh;  border: none; outline: none;">${editor.innerText}</h5>`;
        })
        document.querySelector('#toH6').addEventListener('click', function () {
            editor = document.getElementById('editor');
            container.innerHTML = `<h6 id="editor" contenteditable="true" style="min-height: 100vh;  border: none; outline: none;">${editor.innerText}</h6>`;
        })
    </script>
</body>

</html>

לא כתבתי הכול ב JS . אתה חייב שהכול יהיה בג'אווהסקריפט? או שזה מספיק.

שמח לעזור

@מוטי-אורן
איך אני שלא יהיה את השחור מסביב לטקסט:?

ותודה רבה

מוטי אורן

@שמח-לעזור עדכנתי את הקוד שלא יהיה מסגרת.

שמח לעזור

@מוטי-אורן תודה רבה
והאם יש אפשרות שיהיה רק חלק H1?והשאר H2?

מוטי אורן

@שמח-לעזור אמר בכפתורים שבלחיצה יעשו משהו:

והאם יש אפשרות שיהיה רק חלק H1?והשאר H2?

אתה מתכוון חלק מהטקסט שאתה כותב? לפי מה אתה רוצה לקבוע מה יהיה H1 ומה H2?

שמח לעזור

@מוטי-אורן לסמן כמו בוורד

מוטי אורן

@שמח-לעזור אמר בכפתורים שבלחיצה יעשו משהו:

@מוטי-אורן לסמן כמו בוורד

אוקיי בודק