1

EDIT: I want to insert value="questions[questionNum]['choices'][i]", I do not know the syntax to do this.

I wish to change the value of buttons, using values from a multi level array. It worked with radio buttons, but I would like to use standard buttons this time.

$('#showChoices').append('<input type="button" id="buttons">' +  questions[questionNum]['choices'][i] + '</input>');

This works but the following doesn't:

$('#showChoices').append('<input type="button" id="buttons" value='"questions[questionNum]['choices'][i]"'></input>');

JSBin of the first

Thanks

Improve this question
2
  • 1
    And the question is.... what? Commented Nov 7, 2017 at 3:22
  • @cale_b I can't find the relevant syntax to add the value to the button. The second option looks like what I want but doesn't work. Commented Nov 7, 2017 at 3:26

5 Answers 5

Reset to default
4

You just want to be able to set the value prop with JavaScript? You just need to add the value with string concatenation after value, just like in your first example.

$('#showChoices').append('<input type="button" id="buttons" value=' +  questions[questionNum]['choices'][i] + '></input>');

Or if you want you could try template strings:

$('#showChoices').append(`<input type="button" id="buttons" value=${questions[questionNum]['choices'][i]}></input>`);

They use backticks instead of single or double-quotes and instead of concatination (with +'s) you just write the JavaScript directly in the string, sort of like in your example — but it needs to be wrapped in ${}

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

5 Comments

I'll upvote if you make this answer not a "code-only" answer. Explain a bit what you did, how it worked, why, etc.
While that would be useful, and I certainly would appreciate it, I can understand the reasoning. I thought I needed the double quotation marks that usually follow, I don't. I didn't think I needed the pluses but I did.
Thank you for adding the reasoning, and nomenclature. Using string concatenation, is there any real difference between your answer and Hassan Immam's? Likewise, is there any benefit to making it into a variable? Template strings seem like a really useful tool, thank you for introducing me to them.
@userabuserconfuser You mean the double quotes? If code inside is a string or number - as it should be - they'll both turn out the same. If you pass something nonsense like an object or function, well, they'll spit out something different, but neither will make sense. But that question actually prompted me to write a different answer: jQuery already has an attr() method to add attributes (and it handles all the escaping and whatnot for you.) You might just want to be using that.
@userabuserconfuser As for the variable: yes, for readability's sake you should be breaking your code down into variables describing what they are.
1

Try this :

$('#showChoices').append('<input type="button" id="buttons" value="'+ questions[questionNum]['choices'][i] +'"/>');
Improve this answer

Comments

1

You need to add value using string concatenation. Also, id has to be unique so I have added index of choices to your id to make them unique.

var questions = {'questionNum' : {'choices' : ['foo', 'bar'] }};
for(var i = 0; i < questions.questionNum.choices.length; ++i) {
  $('#showChoices').append('<input type="button" id="buttons'+[i]+'" value="' + questions.questionNum.choices[i] +'"></input>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='showChoices'></div>

Improve this answer

3 Comments

Thank you, I didn't know the syntax. Is there any reason of benefit of using " ' ' " as opposed to samVK's ' '?
I don't see any, I just copied your code from question and modified it.
Thanks for the reply.
1

Is this what you need 

$('#showChoices').append('<input type="button" id="buttons" name="buttons" value='+butVal+'></input>');
Improve this answer

1 Comment

Thanks, would making the value into a variable prior to creating the choices be preferable for any reason?
1

You know, after answering this question, I can't help but feel we all had tunnel vision. Maybe it doesn't really matter but I feel like if you're using jQuery you should be using the attr() method rather than string concatenation in the first place. So:

$('<input type="button" id="buttons">').attr('value', questions[questionNum]['choices'][i]).appendTo('#showChoices');

Is actually what I'd probably write. (I changed append to appendTo` to allow me to chain both properties allowing just one line.

I also noticed: the input element shouldn't be closed — it's a "self closing" tag meaning you don't add a </input> at the end.

And as you asked elsewhere: yes, for reabability's sake I would save all that code to a variable. So:

const choice = questions[questionNum]['choices'][i]; // maybe even break this down into several variables. It's quite deep
$('<input type="button" id="buttons">').attr('value', choice).appendTo('#showChoices');
Improve this answer

2 Comments

Thanks for taking the time to revisit the question, I'm pretty new to programming in general. There's an awful lot to learn. There are often many solutions to the same problem. Would using jQuery be considered best practice in this situation?
@userabuserconfuser well you're already using jQuery, that's why I wrote it. Beyond that you're really asking if you should be using 1) vanilla JS DOM manipulation, 2) jQuery, 3) a modern framework like React or Angular or something. And that's a question that's been answered by others (google jQuery vs. Vanilla JavaScript vs. React or similar.) The short answer is jQuery is on the way out, but probably not for many years and is tried and true and probably the easiest to grasp when first messing with websites. But you're gonna get a lot of different opinions on what the best starting route is.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.