Question

我有一个工作格式化程序，它将基本的html元素插入到textarea标签上选择的文本中。但现在我必须有一组按钮，这些按钮会有几个textareas。当我试图用对象做到这一点时，我得到了“Uncaught TypeError：无法读取属性＆＃39; selectionStart＆＃39;未定义的＆＃39;每个连接的textarea对象出错。

function Formatter(velem, vb_h, vb_b, vb_i, vb_a, vb_img)
// args: textarea elem to connect, header button, bold button, italic button, link button and image button
{
    if(!velem || !vb_h || !vb_b || !vb_i || !vb_a || !vb_img)
        alert("NULL argument!");

    this.elem = velem;
    this.b_h = vb_h;
    this.b_b = vb_b;
    this.b_i = vb_i;
    this.b_a = vb_a;
    this.b_img = vb_img;

    this.f_h = function() 
    { 
            if (this.elem.selectionStart != undefined)
            {
                var startPos = this.elem.selectionStart;
                var endPos = this.elem.selectionEnd;
                var selectedText = this.elem.value.substring(startPos, endPos);

                this.elem.value = this.elem.value.substring(0, startPos) + '<h1>' + selectedText + '</h1>' + this.elem.value.substring(endPos);
            }
    }

    this.f_b = function() 
    {
            if (this.elem.selectionStart != undefined)
            {
                var startPos = this.elem.selectionStart;
                var endPos = this.elem.selectionEnd;
                var selectedText = this.elem.value.substring(startPos, endPos);

                this.elem.value = this.elem.value.substring(0, startPos) + '<b>' + selectedText + '</b>' + this.elem.value.substring(endPos);
            }
    }

    this.f_i = function() 
    {
            if (this.elem.selectionStart != undefined)
            {
                var startPos = this.elem.selectionStart;
                var endPos = this.elem.selectionEnd;
                var selectedText = this.elem.value.substring(startPos, endPos);

                this.elem.value = this.elem.value.substring(0, startPos) + '<i>' + selectedText + '</i>' + this.elem.value.substring(endPos);
            }
    }

    this.f_a = function() 
    {
            if (this.elem.selectionStart != undefined)
            {
                var startPos = this.elem.selectionStart;
                var endPos = this.elem.selectionEnd;
                var selectedText = this.elem.value.substring(startPos, endPos);
                var name = prompt("Podaj nazwę dla tego linku: ", "link");

                this.elem.value = this.elem.value.substring(0, startPos) + '<a href="' + selectedText + '">' + name + '</a>' + this.elem.value.substring(endPos);
            }
    }

    this.f_img = function() 
    {

            if (this.elem.selectionStart != undefined)
            {
                var startPos = this.elem.selectionStart;
                var endPos = this.elem.selectionEnd;
                var selectedText = this.elem.value.substring(startPos, endPos);

                this.elem.value = this.elem.value.substring(0, startPos) + '<img src="' + selectedText + '" />' + this.elem.value.substring(endPos);
            }
    }

    this.b_h.addEventListener('click', this.f_h);
    this.b_b.addEventListener('click', this.f_b);
    this.b_i.addEventListener('click', this.f_i);
    this.b_a.addEventListener('click', this.f_a);
    this.b_img.addEventListener('click', this.f_img);   
}

在HTML中：

Numer testu: <input type="number" name="testnum" id="testnum" /><br /><br />

            <fieldset><legend>Formatowanie</legend>
            <button type="button" id="b2_h1" >Nagłówek</button> <button type="button" id="b2_b" ><b>Pogrubienie</b></button> <button type="button" id="b2_i" ><i>Pochylenie</i></button> <button type="button" id="b2_a" >Link</button> <button type="button" id="b2_img" >Obrazek</button>
            <br />
            </fieldset><br />
            <fieldset><legend>Nowe pytanie</legend>
            Pytanie:<br />
            <textarea id="q_q" cols="95" rows="2"></textarea><br />
            Odpowiedź A:<br />
            <textarea id="q_aa" cols="95" rows="2"></textarea><br />
            Odpowiedź B:<br />
            <textarea id="q_ab" cols="95" rows="2"></textarea><br />
            Odpowiedź C:<br />
            <textarea id="q_ac" cols="95" rows="2"></textarea><br />
            Prawidłowa odpowiedź:<br />
            <input type="radio" id="q_an" value="A"/>A <input type="radio" id="q_an" value="B"/>B <input type="radio" id="q_an" value="C" />C<br /> 
            <button type="button">OK</button>
            </fieldset><br />

            Podgląd: <br />
            <textarea name="val2" id="val2" cols="95" rows="50"></textarea>
            <script type="text/javascript">
                var b2_h1 = document.getElementById('b2_h1'),
                    b2_b = document.getElementById('b2_b'), 
                    b2_i = document.getElementById('b2_i'), 
                    b2_a = document.getElementById('b2_a'),
                    b2_img = document.getElementById('b2_img');

                var f2 = new Formatter(document.getElementById("q_q"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                var f2 = new Formatter(document.getElementById("q_aa"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                var f3 = new Formatter(document.getElementById("q_ab"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                var f4 = new Formatter(document.getElementById("q_ac"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                var f5 = new Formatter(document.getElementById("q_an"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                var f6 = new Formatter(document.getElementById("val2"), b2_h1, b2_b, b2_i, b2_a, b2_img);
            </script>

（对于代码中的波兰语感到抱歉，但我并不想翻译它，这并不重要）

'未捕获的TypeError：无法在对象中读取未定义'的属性'selectionStart'

0 个答案: