CODEWITHSUNDEEP
javascriptfunctionvariablesinnerhtml
Fred K
Fred K

Reputation: 3

More than one variable in a javascript function?

The title may not be correct, I'm not sure how to phrase the question intelligently. May have to do with a lack of intelligence... anyhoo: As part of a CMS, I have this javascript function that generates a preview of data entered into an HTML form textarea. Now, the form obviously contains more parts than just this textarea and I would like to extend the function to include variables for "title" and "summary" as well. Not knowing javascript, I'm stuck as to how to do this. So if any kind soul out there feels like educating me (preferably with visual example and not just "well you've gotta put the thing in the stuff and wiggle...") I would be most grateful.

The function I have is this:

// generate preview
function updatePreview() {
    if (document.getElementById('txt')) {
    var body = document.getElementById('txt').value;
    document.getElementById('preview').innerHTML = body;
    }
}

The title's form field is named "title" and the summary textarea is named "sumtxt" so the imagined function would be something like:

// generate preview
function updatePreview() {
    if (document.getElementById('title')+('txt')+('sumtxt')) {
    var body = document.getElementById('title')+('txt')+('sumtxt').value;
    document.getElementById('preview').innerHTML = body;
    }
}

... but that doesn't look especially right, even to me. Suggestions? Thanks.

Upvotes: 0

Views: 189

Answers (3)

james emanon
james emanon

Reputation: 11807

a take on Frits answer..

 var eleholder = ['title','txt','sumtxt'], body= "";
 for(i=0;i<eleholder.length;i++){
     if(document.getElementById(eleholder[i]) !== null){
         body += document.getElementById(eleholder[i]).value;
     }else{
       body = "";
       break;
     }
  }

Upvotes: 0

Xiaodan Mao
Xiaodan Mao

Reputation: 1706

You can check them one by one. 

function updatePreview() {
    var body = "";
    if (document.getElementById('title')) {
        body += document.getElementById('title').value;
    }
    if (document.getElementById('txt')) {
        body += document.getElementById('txt').value;
    }
    if (document.getElementById('sumtxt')) {
        body += document.getElementById('sumtxt').value;
    }
    document.getElementById('preview').innerHTML = body;
}

Or, you can write a support function: 

function getElementValueById(id){
    var node = document.getElementById(id);
    var value = null;
    if (node) {
        value = node.value;
    }
    return value;
}

And in updatePreview(): 

function updatePreview() {
    var title = getElementValueById("title");
    var txt = getElementValueById("txt");
    var sumtxt = getElementValueById("sumtxt");
    if(title && txt && sumtxt){
        document.getElementById('preview').innerHTML = title + txt + sumtxt;
    }
}

Hope it's helpful.

Upvotes: 0

Halcyon
Halcyon

Reputation: 57729

document.getElementById('txt') is either a DOMNode or null, document.getElementById('txt').value is a string, so just do:

if (document.getElementById('title') !== null && document.getElementById('txt') !== null && document.getElementById('sumtxt') !== null) {
    var body = document.getElementById('title').value + document.getElementById('txt').value + document.getElementById('sumtxt').value;
    ...
}

Upvotes: 1

Related Questions