More than one variable in a javascript function?

Question

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.

Halcyon · Accepted Answer · 2013-03-09 00:02:51Z

1

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;
    ...
}

answered Mar 9, 2013 at 0:02

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fred K Over a year ago

Thanks! Much appreciated. Will now totter off to learn javascript... ;)

Xiaodan Mao · Accepted Answer · 2013-03-09 05:08:38Z

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.

james emanon · Accepted Answer · 2013-03-09 05:39:55Z

0

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;
     }
  }

answered Mar 9, 2013 at 5:39

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

1 Comment

Halcyon Over a year ago

This code probably doesn't do what you want it to do. It's not equivalent to my code in any case. The for loop is a bad idea.

Collectives™ on Stack Overflow

More than one variable in a javascript function?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related