Attempting to retrieve a 's .value with jQuery

So I have this HTML Code/Javascript,

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell');

  spellSelect.setAttribute('name', 'spell');



  spellLabel.setAttribute('for', 'spell');

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

var spellCheck = 1;

for (allSpells = 0; allSpells < spellNumber; allSpells++) {

  var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

  console.log(multipleSpell);

  spellCheck++

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

And am trying to retrieve the .value of the <select id="spell"> options. However, the console returns an undefined, instead of vanish or teleport.
Can anyone point me in the right direction for this?

edited Nov 20 '18 at 17:44

asked Nov 20 '18 at 17:25

Dr Bracewell

245

use $.val() method

– secret super star
Nov 20 '18 at 17:28

You need to use val() as you are operating off of a jQuery object, which does not directly expose properties.

– Taplar
Nov 20 '18 at 17:28

well why would a label have a value? And you can not have mutltiple elements with the same id.

– epascarello
Nov 20 '18 at 17:44

I believe the issue now is they are targeting the single parent div, rather than the nested selects that are appended. The selector is invalid for what they are trying to do

– Taplar
Nov 20 '18 at 17:45

add a comment |

So I have this HTML Code/Javascript,

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell');

  spellSelect.setAttribute('name', 'spell');



  spellLabel.setAttribute('for', 'spell');

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

var spellCheck = 1;

for (allSpells = 0; allSpells < spellNumber; allSpells++) {

  var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

  console.log(multipleSpell);

  spellCheck++

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

edited Nov 20 '18 at 17:44

asked Nov 20 '18 at 17:25

Dr Bracewell

245

use $.val() method

– secret super star
Nov 20 '18 at 17:28

You need to use val() as you are operating off of a jQuery object, which does not directly expose properties.

– Taplar
Nov 20 '18 at 17:28

well why would a label have a value? And you can not have mutltiple elements with the same id.

– epascarello
Nov 20 '18 at 17:44

I believe the issue now is they are targeting the single parent div, rather than the nested selects that are appended. The selector is invalid for what they are trying to do

– Taplar
Nov 20 '18 at 17:45

add a comment |

So I have this HTML Code/Javascript,

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell');

  spellSelect.setAttribute('name', 'spell');



  spellLabel.setAttribute('for', 'spell');

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

var spellCheck = 1;

for (allSpells = 0; allSpells < spellNumber; allSpells++) {

  var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

  console.log(multipleSpell);

  spellCheck++

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

edited Nov 20 '18 at 17:44

asked Nov 20 '18 at 17:25

Dr Bracewell

245

So I have this HTML Code/Javascript,

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell');

  spellSelect.setAttribute('name', 'spell');



  spellLabel.setAttribute('for', 'spell');

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

var spellCheck = 1;

for (allSpells = 0; allSpells < spellNumber; allSpells++) {

  var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

  console.log(multipleSpell);

  spellCheck++

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell');

  spellSelect.setAttribute('name', 'spell');



  spellLabel.setAttribute('for', 'spell');

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

var spellCheck = 1;

for (allSpells = 0; allSpells < spellNumber; allSpells++) {

  var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

  console.log(multipleSpell);

  spellCheck++

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell');

  spellSelect.setAttribute('name', 'spell');



  spellLabel.setAttribute('for', 'spell');

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

var spellCheck = 1;

for (allSpells = 0; allSpells < spellNumber; allSpells++) {

  var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

  console.log(multipleSpell);

  spellCheck++

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

javascript jquery html

edited Nov 20 '18 at 17:44

asked Nov 20 '18 at 17:25

Dr Bracewell

245

edited Nov 20 '18 at 17:44

asked Nov 20 '18 at 17:25

Dr Bracewell

245

edited Nov 20 '18 at 17:44

asked Nov 20 '18 at 17:25

Dr Bracewell

245

asked Nov 20 '18 at 17:25

Dr Bracewell

245

asked Nov 20 '18 at 17:25

Dr Bracewell

245

use $.val() method

– secret super star
Nov 20 '18 at 17:28

You need to use val() as you are operating off of a jQuery object, which does not directly expose properties.

– Taplar
Nov 20 '18 at 17:28

well why would a label have a value? And you can not have mutltiple elements with the same id.

– epascarello
Nov 20 '18 at 17:44

I believe the issue now is they are targeting the single parent div, rather than the nested selects that are appended. The selector is invalid for what they are trying to do

– Taplar
Nov 20 '18 at 17:45

add a comment |

use $.val() method

– secret super star
Nov 20 '18 at 17:28

You need to use val() as you are operating off of a jQuery object, which does not directly expose properties.

– Taplar
Nov 20 '18 at 17:28

well why would a label have a value? And you can not have mutltiple elements with the same id.

– epascarello
Nov 20 '18 at 17:44

I believe the issue now is they are targeting the single parent div, rather than the nested selects that are appended. The selector is invalid for what they are trying to do

– Taplar
Nov 20 '18 at 17:45

use $.val() method

– secret super star
Nov 20 '18 at 17:28

You need to use val() as you are operating off of a jQuery object, which does not directly expose properties.

– Taplar
Nov 20 '18 at 17:28

well why would a label have a value? And you can not have mutltiple elements with the same id.

– epascarello
Nov 20 '18 at 17:44

I believe the issue now is they are targeting the single parent div, rather than the nested selects that are appended. The selector is invalid for what they are trying to do

– Taplar
Nov 20 '18 at 17:45

add a comment |

2 Answers
2

active

oldest

votes

Well:

Id should be unique so I added spellSelect.setAttribute('id', 'spell' + spellNumber); ( + other rows)

Also multipleSpell = $("#spell" + spellCheck).val();

And console.log(multipleSpell); is called only once at the begining -> you should change it to function too
`

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell' + spellNumber);

  spellSelect.setAttribute('name', 'spell' + spellNumber);



  spellLabel.setAttribute('for', 'spell' + spellNumber);

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

   var spellCheck = 0;

   for (allSpells = 0; allSpells < spellNumber; allSpells++) {

     var multipleSpell = $("#spell" + spellCheck).val();

     console.log(multipleSpell);

     spellCheck++

   }

   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

edited Nov 20 '18 at 17:53

answered Nov 20 '18 at 17:41

Jiří Ferkl

414

It's a typo in the selector. They should be trying to target the inner selects they are appending to the single div, but they are not. Not an issue of duplicate ids

– Taplar
Nov 20 '18 at 17:42

So how do I make them target the selects?

– Dr Bracewell
Nov 20 '18 at 17:47

@DrBracewell i edited the answer, run the snippet (is that what you wanted?) then take a look :)

– Jiří Ferkl
Nov 20 '18 at 17:54

I mentioned the issue of duplicated ids because i changed the selector.

– Jiří Ferkl
Nov 20 '18 at 18:01

Yes thanks that's perfect!

– Dr Bracewell
Nov 20 '18 at 20:20

add a comment |

var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

More info here.

Edited:

Well, i see you are trying to get all select values. Why not try this?

function generateYaml() {



    var spellCheck = 1;

    var selects = $("select").each(function (index, element) {

        var value = $(element).val()

        console.log("The value at index %d is %s", index, value);

        spellCheck++

    });



}

This way you iterate over all the selects, and get their values inside the loop. Try it here (open the developer console):https://darkcyanpointlessbooleanvalue--parzibyte.repl.co/

edited Nov 20 '18 at 17:55

answered Nov 20 '18 at 17:30

Luis Cabrera Benito

557310

Hmm it still returns undefined, I've edited the post with .val() to show you

– Dr Bracewell
Nov 20 '18 at 17:31

Yes, i have fixed the strings

– Luis Cabrera Benito
Nov 20 '18 at 17:33

Nope, still undefined.

– Dr Bracewell
Nov 20 '18 at 17:37

You do realize that you are doing that loop outside of the method, right? So it's going to run on page load, not when that method happens. And your spells div starts off empty

– Taplar
Nov 20 '18 at 17:38

You want to get a select's value or a div value?

– Luis Cabrera Benito
Nov 20 '18 at 17:41

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398352%2fattempting-to-retrieve-a-selects-value-with-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Well:

Id should be unique so I added spellSelect.setAttribute('id', 'spell' + spellNumber); ( + other rows)

Also multipleSpell = $("#spell" + spellCheck).val();

And console.log(multipleSpell); is called only once at the begining -> you should change it to function too
`

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell' + spellNumber);

  spellSelect.setAttribute('name', 'spell' + spellNumber);



  spellLabel.setAttribute('for', 'spell' + spellNumber);

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

   var spellCheck = 0;

   for (allSpells = 0; allSpells < spellNumber; allSpells++) {

     var multipleSpell = $("#spell" + spellCheck).val();

     console.log(multipleSpell);

     spellCheck++

   }

   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

edited Nov 20 '18 at 17:53

answered Nov 20 '18 at 17:41

Jiří Ferkl

414

It's a typo in the selector. They should be trying to target the inner selects they are appending to the single div, but they are not. Not an issue of duplicate ids

– Taplar
Nov 20 '18 at 17:42

So how do I make them target the selects?

– Dr Bracewell
Nov 20 '18 at 17:47

@DrBracewell i edited the answer, run the snippet (is that what you wanted?) then take a look :)

– Jiří Ferkl
Nov 20 '18 at 17:54

I mentioned the issue of duplicated ids because i changed the selector.

– Jiří Ferkl
Nov 20 '18 at 18:01

Yes thanks that's perfect!

– Dr Bracewell
Nov 20 '18 at 20:20

add a comment |

Well:

Id should be unique so I added spellSelect.setAttribute('id', 'spell' + spellNumber); ( + other rows)

Also multipleSpell = $("#spell" + spellCheck).val();

And console.log(multipleSpell); is called only once at the begining -> you should change it to function too
`

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell' + spellNumber);

  spellSelect.setAttribute('name', 'spell' + spellNumber);



  spellLabel.setAttribute('for', 'spell' + spellNumber);

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

   var spellCheck = 0;

   for (allSpells = 0; allSpells < spellNumber; allSpells++) {

     var multipleSpell = $("#spell" + spellCheck).val();

     console.log(multipleSpell);

     spellCheck++

   }

   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

edited Nov 20 '18 at 17:53

answered Nov 20 '18 at 17:41

Jiří Ferkl

414

It's a typo in the selector. They should be trying to target the inner selects they are appending to the single div, but they are not. Not an issue of duplicate ids

– Taplar
Nov 20 '18 at 17:42

So how do I make them target the selects?

– Dr Bracewell
Nov 20 '18 at 17:47

@DrBracewell i edited the answer, run the snippet (is that what you wanted?) then take a look :)

– Jiří Ferkl
Nov 20 '18 at 17:54

I mentioned the issue of duplicated ids because i changed the selector.

– Jiří Ferkl
Nov 20 '18 at 18:01

Yes thanks that's perfect!

– Dr Bracewell
Nov 20 '18 at 20:20

add a comment |

Well:

Id should be unique so I added spellSelect.setAttribute('id', 'spell' + spellNumber); ( + other rows)

Also multipleSpell = $("#spell" + spellCheck).val();

And console.log(multipleSpell); is called only once at the begining -> you should change it to function too
`

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell' + spellNumber);

  spellSelect.setAttribute('name', 'spell' + spellNumber);



  spellLabel.setAttribute('for', 'spell' + spellNumber);

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

   var spellCheck = 0;

   for (allSpells = 0; allSpells < spellNumber; allSpells++) {

     var multipleSpell = $("#spell" + spellCheck).val();

     console.log(multipleSpell);

     spellCheck++

   }

   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

edited Nov 20 '18 at 17:53

answered Nov 20 '18 at 17:41

Jiří Ferkl

414

Well:

Id should be unique so I added spellSelect.setAttribute('id', 'spell' + spellNumber); ( + other rows)

Also multipleSpell = $("#spell" + spellCheck).val();

And console.log(multipleSpell); is called only once at the begining -> you should change it to function too
`

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell' + spellNumber);

  spellSelect.setAttribute('name', 'spell' + spellNumber);



  spellLabel.setAttribute('for', 'spell' + spellNumber);

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

   var spellCheck = 0;

   for (allSpells = 0; allSpells < spellNumber; allSpells++) {

     var multipleSpell = $("#spell" + spellCheck).val();

     console.log(multipleSpell);

     spellCheck++

   }

   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell' + spellNumber);

  spellSelect.setAttribute('name', 'spell' + spellNumber);



  spellLabel.setAttribute('for', 'spell' + spellNumber);

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

   var spellCheck = 0;

   for (allSpells = 0; allSpells < spellNumber; allSpells++) {

     var multipleSpell = $("#spell" + spellCheck).val();

     console.log(multipleSpell);

     spellCheck++

   }

   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

var spellNumber = 0;



function createSpell() {

  var spellOption = document.createElement("option");

  var spellOption2 = document.createElement("option");

  var spellSelect = document.createElement("select");

  var spellLabel = document.createElement("label");

  var spellEnvelope = document.createElement("p");



  spellOption.innerHTML = 'Vanish';

  spellOption.setAttribute('value', 'vanish');

  spellOption2.innerHTML = 'Teleport';

  spellOption2.setAttribute('value', 'teleport');



  spellSelect.setAttribute('id', 'spell' + spellNumber);

  spellSelect.setAttribute('name', 'spell' + spellNumber);



  spellLabel.setAttribute('for', 'spell' + spellNumber);

  spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';



  spellEnvelope.appendChild(spellLabel);

  spellEnvelope.appendChild(spellSelect);

  spellSelect.appendChild(spellOption);

  spellSelect.appendChild(spellOption2);

  document.getElementById("spells").appendChild(spellEnvelope);

  spellNumber += 1;

}

createSpell()

function generateYaml() {

   var spellCheck = 0;

   for (allSpells = 0; allSpells < spellNumber; allSpells++) {

     var multipleSpell = $("#spell" + spellCheck).val();

     console.log(multipleSpell);

     spellCheck++

   }

   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="spells"></div>

<button onClick="createSpell()">Add A Spell</button>

<button id="button" onClick="generateYaml()">Make the Magic Happen</button>

edited Nov 20 '18 at 17:53

answered Nov 20 '18 at 17:41

Jiří Ferkl

414

edited Nov 20 '18 at 17:53

answered Nov 20 '18 at 17:41

Jiří Ferkl

414

answered Nov 20 '18 at 17:41

Jiří Ferkl

414

answered Nov 20 '18 at 17:41

Jiří Ferkl

414

It's a typo in the selector. They should be trying to target the inner selects they are appending to the single div, but they are not. Not an issue of duplicate ids

– Taplar
Nov 20 '18 at 17:42

So how do I make them target the selects?

– Dr Bracewell
Nov 20 '18 at 17:47

@DrBracewell i edited the answer, run the snippet (is that what you wanted?) then take a look :)

– Jiří Ferkl
Nov 20 '18 at 17:54

I mentioned the issue of duplicated ids because i changed the selector.

– Jiří Ferkl
Nov 20 '18 at 18:01

Yes thanks that's perfect!

– Dr Bracewell
Nov 20 '18 at 20:20

add a comment |

It's a typo in the selector. They should be trying to target the inner selects they are appending to the single div, but they are not. Not an issue of duplicate ids

– Taplar
Nov 20 '18 at 17:42

So how do I make them target the selects?

– Dr Bracewell
Nov 20 '18 at 17:47

@DrBracewell i edited the answer, run the snippet (is that what you wanted?) then take a look :)

– Jiří Ferkl
Nov 20 '18 at 17:54

I mentioned the issue of duplicated ids because i changed the selector.

– Jiří Ferkl
Nov 20 '18 at 18:01

Yes thanks that's perfect!

– Dr Bracewell
Nov 20 '18 at 20:20

It's a typo in the selector. They should be trying to target the inner selects they are appending to the single div, but they are not. Not an issue of duplicate ids

– Taplar
Nov 20 '18 at 17:42

So how do I make them target the selects?

– Dr Bracewell
Nov 20 '18 at 17:47

@DrBracewell i edited the answer, run the snippet (is that what you wanted?) then take a look :)

– Jiří Ferkl
Nov 20 '18 at 17:54

I mentioned the issue of duplicated ids because i changed the selector.

– Jiří Ferkl
Nov 20 '18 at 18:01

Yes thanks that's perfect!

– Dr Bracewell
Nov 20 '18 at 20:20

add a comment |

var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

More info here.

Edited:

Well, i see you are trying to get all select values. Why not try this?

function generateYaml() {



    var spellCheck = 1;

    var selects = $("select").each(function (index, element) {

        var value = $(element).val()

        console.log("The value at index %d is %s", index, value);

        spellCheck++

    });



}

This way you iterate over all the selects, and get their values inside the loop. Try it here (open the developer console):https://darkcyanpointlessbooleanvalue--parzibyte.repl.co/

edited Nov 20 '18 at 17:55

answered Nov 20 '18 at 17:30

Luis Cabrera Benito

557310

Hmm it still returns undefined, I've edited the post with .val() to show you

– Dr Bracewell
Nov 20 '18 at 17:31

Yes, i have fixed the strings

– Luis Cabrera Benito
Nov 20 '18 at 17:33

Nope, still undefined.

– Dr Bracewell
Nov 20 '18 at 17:37

You do realize that you are doing that loop outside of the method, right? So it's going to run on page load, not when that method happens. And your spells div starts off empty

– Taplar
Nov 20 '18 at 17:38

You want to get a select's value or a div value?

– Luis Cabrera Benito
Nov 20 '18 at 17:41

|
show 2 more comments

var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

More info here.

Edited:

Well, i see you are trying to get all select values. Why not try this?

function generateYaml() {



    var spellCheck = 1;

    var selects = $("select").each(function (index, element) {

        var value = $(element).val()

        console.log("The value at index %d is %s", index, value);

        spellCheck++

    });



}

This way you iterate over all the selects, and get their values inside the loop. Try it here (open the developer console):https://darkcyanpointlessbooleanvalue--parzibyte.repl.co/

edited Nov 20 '18 at 17:55

answered Nov 20 '18 at 17:30

Luis Cabrera Benito

557310

Hmm it still returns undefined, I've edited the post with .val() to show you

– Dr Bracewell
Nov 20 '18 at 17:31

Yes, i have fixed the strings

– Luis Cabrera Benito
Nov 20 '18 at 17:33

Nope, still undefined.

– Dr Bracewell
Nov 20 '18 at 17:37

You do realize that you are doing that loop outside of the method, right? So it's going to run on page load, not when that method happens. And your spells div starts off empty

– Taplar
Nov 20 '18 at 17:38

You want to get a select's value or a div value?

– Luis Cabrera Benito
Nov 20 '18 at 17:41

|
show 2 more comments

var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

More info here.

Edited:

Well, i see you are trying to get all select values. Why not try this?

function generateYaml() {



    var spellCheck = 1;

    var selects = $("select").each(function (index, element) {

        var value = $(element).val()

        console.log("The value at index %d is %s", index, value);

        spellCheck++

    });



}

This way you iterate over all the selects, and get their values inside the loop. Try it here (open the developer console):https://darkcyanpointlessbooleanvalue--parzibyte.repl.co/

edited Nov 20 '18 at 17:55

answered Nov 20 '18 at 17:30

Luis Cabrera Benito

557310

var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();

More info here.

Edited:

Well, i see you are trying to get all select values. Why not try this?

function generateYaml() {



    var spellCheck = 1;

    var selects = $("select").each(function (index, element) {

        var value = $(element).val()

        console.log("The value at index %d is %s", index, value);

        spellCheck++

    });



}

This way you iterate over all the selects, and get their values inside the loop. Try it here (open the developer console):https://darkcyanpointlessbooleanvalue--parzibyte.repl.co/

edited Nov 20 '18 at 17:55

answered Nov 20 '18 at 17:30

Luis Cabrera Benito

557310

edited Nov 20 '18 at 17:55

answered Nov 20 '18 at 17:30

Luis Cabrera Benito

557310

answered Nov 20 '18 at 17:30

Luis Cabrera Benito

557310

answered Nov 20 '18 at 17:30

Luis Cabrera Benito

557310

Hmm it still returns undefined, I've edited the post with .val() to show you

– Dr Bracewell
Nov 20 '18 at 17:31

Yes, i have fixed the strings

– Luis Cabrera Benito
Nov 20 '18 at 17:33

Nope, still undefined.

– Dr Bracewell
Nov 20 '18 at 17:37

You do realize that you are doing that loop outside of the method, right? So it's going to run on page load, not when that method happens. And your spells div starts off empty

– Taplar
Nov 20 '18 at 17:38

You want to get a select's value or a div value?

– Luis Cabrera Benito
Nov 20 '18 at 17:41

|
show 2 more comments

Hmm it still returns undefined, I've edited the post with .val() to show you

– Dr Bracewell
Nov 20 '18 at 17:31

Yes, i have fixed the strings

– Luis Cabrera Benito
Nov 20 '18 at 17:33

Nope, still undefined.

– Dr Bracewell
Nov 20 '18 at 17:37

You do realize that you are doing that loop outside of the method, right? So it's going to run on page load, not when that method happens. And your spells div starts off empty

– Taplar
Nov 20 '18 at 17:38

You want to get a select's value or a div value?

– Luis Cabrera Benito
Nov 20 '18 at 17:41

Hmm it still returns undefined, I've edited the post with .val() to show you

– Dr Bracewell
Nov 20 '18 at 17:31

Yes, i have fixed the strings

– Luis Cabrera Benito
Nov 20 '18 at 17:33

Nope, still undefined.

– Dr Bracewell
Nov 20 '18 at 17:37

You do realize that you are doing that loop outside of the method, right? So it's going to run on page load, not when that method happens. And your spells div starts off empty

– Taplar
Nov 20 '18 at 17:38

You want to get a select's value or a div value?

– Luis Cabrera Benito
Nov 20 '18 at 17:41

|
show 2 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu