Using variables in javascript to reference html elements dynamically

Question

I am trying to use jQuery / javascript to remove a class from a named input element if a checkbox is ticked.

I have several checkboxes, each with a accompanying hidden (on page load) text input field.

The checkbox and text input field are named "question_X" and "question_X_description" respectively. (where X is a number 0 to 100, say)

As such I'm trying to define a variable in my code that is defined as "this element's name"+"_description", and then use that to define the suitable element to remove the class from.

Here is what I've tried:

$('input:checkbox').change(function(){

var x = $(this).attr('name').'_description';

if($(this).is(":checked")) {
    $('input[name="x"]').removeClass("hidden");
} else {
     $('input[name="x"]').addClass("hidden");
}
});

However, nothing happens when the any checkbox is checked. Am I referencing my variable correctly?

epascarello · Accepted Answer · 2013-10-22 15:31:55Z

3

Use your console, It will have error messages.

First issue

var x = $(this).attr('name').'_description';
                           ^^^

That is not how you build a string in JavaScript. JavaScript does not use . to join strings. It uses +

var x = $(this).attr('name') + '_description';

Second issue

$('input[name="x"]').

You are not looking for the string you built, you are looking for an element with the name x

Needs to be

$('input[name="' + x + '"]').

answered Oct 22, 2013 at 15:31

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

Gideon Over a year ago

Thanks kind viking man: I am not good at javascript :) Thanks for teaching me how to reference my variables properly and concatenate! I'll accept once the time limit runs down.

Alex · Accepted Answer · 2013-10-22 15:34:08Z

0

$('input[name="x"]').removeClass("hidden");

Will be looking for:

<input name="x" />

Try

$(name="'+x+'").removeClass("hidden");

answered Oct 22, 2013 at 15:34

Alex

9,0612 gold badges29 silver badges44 bronze badges

Comments

Adrian Thompson Phillips · Accepted Answer · 2013-10-22 15:55:43Z

0

Use document.getElementById('element_name')

Example of HTML element: <input type="text" id="element_name">

edited Oct 22, 2013 at 15:55

Adrian Thompson Phillips

7,1987 gold badges43 silver badges72 bronze badges

answered Oct 22, 2013 at 15:35

Dymencharles

111 bronze badge

Collectives™ on Stack Overflow

Using variables in javascript to reference html elements dynamically

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related