多输入或Textarea中的结果预览未运行

Question

I have the code to display a preview of the code tag on a form.

If you only use one input, this can be. But if you add one more input, then it is not running.

My code:

<style>
.text_edit, #prevTxt {
    width: 400px;
    height:200px;
    border: solid 1px #D4DEDE;
    padding: 10px; 
}
</style>

<script type="text/javascript">
    function prevTxt() {
        var textArea = document.getElementById('inputTxt');
        var div = document.getElementById('prevTxt');
        var text = textArea.value;
        text = text.replace(/\n/gi, "<br />");
        div.innerHTML = text;
    }
    </script>

<textarea class="text_edit" id="inputTxt" onkeyup="prevTxt()"></textarea>

<div id="prevTxt" style="background: #E7ECEC; line-height: 1.1em;"></div>

If I add this code, you can not run

<input class="text_edit" id="inputTxt" onkeyup="prevTxt()" />

How to change the code?

Answer 1

You should use unique ids. You can rewrite you code without using ids here:

<textarea class="text_edit" onkeyup="prevTxt(this)"></textarea>
<input class="text_edit" onkeyup="prevTxt(this)" />


function prevTxt(el) {
    var div = document.getElementById('prevTxt');
    var text = el.value;
    text = text.replace(/\n/gi, "<br />");
    div.innerHTML = text;
}

Answer 2

You cannot use duplicate ID's across a single page. Since you already used "inputTXT", you will have to use a different id, but it looks like you're using that input tag for the same purpose as the previously used textarea. You will need to get rid of or rename one of them.

Pick anything you want for the id. For instance, this would work:

<input class="text_edit" id="inputTxtInput" onkeyup="prevTxt()" />

Answer 3

The attribute ID in HTML has to be unique. If you want to create another element tag, you'll have to change the ID. For example:

 <textarea class="text_edit" id="inputTxt" onkeyup="prevTxt()"></textarea> <div id="prevTxt" style="background: #E7ECEC; line-height: 1.1em;"> <input id="inputTxt2"/> <input id="inputTxt3"/> <input id="inputTxt4"/> </div> 

If you want to apply the same effects/attribute to multiple elements, use the attribute class .