CODEWITHSUNDEEP
javascripttextareaaddition
diogo
diogo

Reputation: 15

how to make button insert tag in a textfield?

I'm trying to make multiple buttons that when clicked they add tags like <p></p> and <b></b> to a text-field. I have already figured out how to make it work like this:

<script>
function addtxt(input) {
    var obj=document.getElementById(input)
    obj.value+="<p></p>"
}
</script>

<input type="button" value="<p></p>" onclick="addtxt('body')">

but instead of having multiple scripts for every different button, I'd like to know if there is a way of the JS use the element value as obj.value. Is it possible?




EDIT: i found this other code online that's even better, how can i make this new code use the element value, is there any way?

function boldText(textAreaId, link) 
{
    var browser=navigator.appName
    var b_version=navigator.appVersion

    if (browser=="Microsoft Internet Explorer" && b_version>='4')
    {
        var str = document.selection.createRange().text;
        document.getElementById(textAreaId).focus();
        var sel = document.selection.createRange();
        sel.text = "<b>" + str + "</b>";
        return;
    }

    field = document.getElementById(textAreaId);
    startPos = field.selectionStart;
    endPos = field.selectionEnd;
    before = field.value.substr(0, startPos);
    selected = field.value.substr(field.selectionStart, (field.selectionEnd - field.selectionStart));
    after = field.value.substr(field.selectionEnd, (field.value.length - field.selectionEnd));
    field.value = before + "<b>" + selected + "</b>" + after;
}

Upvotes: 0

Views: 722

Answers (2)

Sergio
Sergio

Reputation: 28837

Here is an example with a specific div that receives the code javascript produces. I don't recomend adding it to a div with id body, because that word is reserved for html structural elements, so I called the destination div "addHere".

Javascript

function addtxt(e) {
    console.log(e)
   var dest = document.getElementById("addHere");
   dest.innerHTML = e.value;

}

HTML

<input type="button" value="<p>Text</p>" onclick="addtxt(this)">
<div id="addHere"></div>

fiddle here

Upvotes: 0

Brin Marx
Brin Marx

Reputation: 153

You may pass this to your onclick handler, and then access it's value within your function: 

<script>
function addtxt(input, button) {
    var obj=document.getElementById(input);
    obj.value+=button.value;
}
</script>

<input type="button" value="<p></p>" onclick="addtxt('body', this)">
<input type="button" value="<b></b>" onclick="addtxt('body', this)">

Upvotes: 1

Related Questions