Save HTML element into variable without creating an array
So, the javascript kinda looks like this:
var test = $('#selectelement')
console.log(test)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Now, when running this code, test becomes an array containing the respective element. So if I want to call this select element from the array, I'd have to code
test[0]
Now, this is not much of an issue of course, but I'd like to avoid it since an array is NOT what I need here because only one single element is saved to this variable.
So is there any way to avoid this behavior and instead just have a "normal" variable created (I know JS only knows objects, but at least syntaxwise it should behave like a "normal" variable/primitive value :D)?
javascript jquery html
edited Nov 13 at 7:43
guradio
13.7k31836
asked Nov 13 at 7:24
JSONBUG123
528
add a comment |
So, the javascript kinda looks like this:
var test = $('#selectelement')
console.log(test)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Now, when running this code, test becomes an array containing the respective element. So if I want to call this select element from the array, I'd have to code
test[0]
Now, this is not much of an issue of course, but I'd like to avoid it since an array is NOT what I need here because only one single element is saved to this variable.
So is there any way to avoid this behavior and instead just have a "normal" variable created (I know JS only knows objects, but at least syntaxwise it should behave like a "normal" variable/primitive value :D)?
javascript jquery html
edited Nov 13 at 7:43
guradio
13.7k31836
asked Nov 13 at 7:24
JSONBUG123
528
as per your error it seems like you are not including JQuery so please make sure to include it other wise error has occurred like $ is not defined.
– Rahul Dudharejiya
Nov 13 at 7:26
Do you want to hold it as pure html text?
– Ali Sheikhpour
Nov 13 at 7:31
add a comment |
So, the javascript kinda looks like this:
var test = $('#selectelement')
console.log(test)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Now, when running this code, test becomes an array containing the respective element. So if I want to call this select element from the array, I'd have to code
test[0]
Now, this is not much of an issue of course, but I'd like to avoid it since an array is NOT what I need here because only one single element is saved to this variable.
So is there any way to avoid this behavior and instead just have a "normal" variable created (I know JS only knows objects, but at least syntaxwise it should behave like a "normal" variable/primitive value :D)?
javascript jquery html
edited Nov 13 at 7:43
guradio
13.7k31836
asked Nov 13 at 7:24
JSONBUG123
528
So, the javascript kinda looks like this:
var test = $('#selectelement')
console.log(test)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Now, when running this code, test becomes an array containing the respective element. So if I want to call this select element from the array, I'd have to code
test[0]
Now, this is not much of an issue of course, but I'd like to avoid it since an array is NOT what I need here because only one single element is saved to this variable.
So is there any way to avoid this behavior and instead just have a "normal" variable created (I know JS only knows objects, but at least syntaxwise it should behave like a "normal" variable/primitive value :D)?
var test = $('#selectelement')
console.log(test)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>var test = $('#selectelement')
console.log(test)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>javascript jquery html
javascript jquery html
edited Nov 13 at 7:43
guradio
13.7k31836
asked Nov 13 at 7:24
JSONBUG123
528
edited Nov 13 at 7:43
guradio
13.7k31836
asked Nov 13 at 7:24
JSONBUG123
528
edited Nov 13 at 7:43
guradio
13.7k31836
edited Nov 13 at 7:43
guradio
13.7k31836
edited Nov 13 at 7:43
guradio
13.7k31836
13.7k31836
asked Nov 13 at 7:24
JSONBUG123
528
asked Nov 13 at 7:24
JSONBUG123
528
asked Nov 13 at 7:24
JSONBUG123
528
528
as per your error it seems like you are not including JQuery so please make sure to include it other wise error has occurred like $ is not defined.
– Rahul Dudharejiya
Nov 13 at 7:26
Do you want to hold it as pure html text?
– Ali Sheikhpour
Nov 13 at 7:31
add a comment |
as per your error it seems like you are not including JQuery so please make sure to include it other wise error has occurred like $ is not defined.
– Rahul Dudharejiya
Nov 13 at 7:26
Do you want to hold it as pure html text?
– Ali Sheikhpour
Nov 13 at 7:31
as per your error it seems like you are not including JQuery so please make sure to include it other wise error has occurred like $ is not defined.
– Rahul Dudharejiya
Nov 13 at 7:26
as per your error it seems like you are not including JQuery so please make sure to include it other wise error has occurred like $ is not defined.
– Rahul Dudharejiya
Nov 13 at 7:26
Do you want to hold it as pure html text?
– Ali Sheikhpour
Nov 13 at 7:31
Do you want to hold it as pure html text?
– Ali Sheikhpour
Nov 13 at 7:31
add a comment |
3 Answers
3
active
oldest
votes
it's an array because you return a jquery object :
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents')//array
you can store it in one line
var contents = $('#contents')[0]; //returns a jQuery Object
JavaScript objects act similar to associative arrays
answered Nov 13 at 7:29
Sari Masri
1297
woah, thanks, nice to know this ;) Just learned a bit more about the inner workings of native JS and Jquery commands! :D
– JSONBUG123
Nov 13 at 7:44
add a comment |
Using the code you had returns the jquery object - what you could do is to get the value of the selected element and use that for the variable. The following code simply updates a variable and consoles it when you change the selected option of the select list.
$('#selectelement').on('change',function(){
var test = $(this).val();
console.log(test)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectelement">Change me </label>
<select id="selectelement">
<option selected disabled></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>answered Nov 13 at 7:29
gavgrif
8,2432717
add a comment |
You can always use
var test = ('#selectelement')[0];
or a more JQuery way,
var test = ('#selectelement').get(0);
to get the first element into the variable directly.
You can of course also use native functions like this:
var test = document.querySelector("#selectelement");
which will still give you the only element.
answered Nov 13 at 7:33
Ahs N
7,04711528
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275840%2fsave-html-select-element-into-variable-without-creating-an-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
it's an array because you return a jquery object :
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents')//array
you can store it in one line
var contents = $('#contents')[0]; //returns a jQuery Object
JavaScript objects act similar to associative arrays
answered Nov 13 at 7:29
Sari Masri
1297
woah, thanks, nice to know this ;) Just learned a bit more about the inner workings of native JS and Jquery commands! :D
– JSONBUG123
Nov 13 at 7:44
add a comment |
it's an array because you return a jquery object :
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents')//array
you can store it in one line
var contents = $('#contents')[0]; //returns a jQuery Object
JavaScript objects act similar to associative arrays
answered Nov 13 at 7:29
Sari Masri
1297
woah, thanks, nice to know this ;) Just learned a bit more about the inner workings of native JS and Jquery commands! :D
– JSONBUG123
Nov 13 at 7:44
add a comment |
it's an array because you return a jquery object :
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents')//array
you can store it in one line
var contents = $('#contents')[0]; //returns a jQuery Object
JavaScript objects act similar to associative arrays
answered Nov 13 at 7:29
Sari Masri
1297
it's an array because you return a jquery object :
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents')//array
you can store it in one line
var contents = $('#contents')[0]; //returns a jQuery Object
JavaScript objects act similar to associative arrays
answered Nov 13 at 7:29
Sari Masri
1297
answered Nov 13 at 7:29
Sari Masri
1297
answered Nov 13 at 7:29
Sari Masri
1297
answered Nov 13 at 7:29
Sari Masri
1297
1297
woah, thanks, nice to know this ;) Just learned a bit more about the inner workings of native JS and Jquery commands! :D
– JSONBUG123
Nov 13 at 7:44
add a comment |
woah, thanks, nice to know this ;) Just learned a bit more about the inner workings of native JS and Jquery commands! :D
– JSONBUG123
Nov 13 at 7:44
woah, thanks, nice to know this ;) Just learned a bit more about the inner workings of native JS and Jquery commands! :D
– JSONBUG123
Nov 13 at 7:44
woah, thanks, nice to know this ;) Just learned a bit more about the inner workings of native JS and Jquery commands! :D
– JSONBUG123
Nov 13 at 7:44
add a comment |
Using the code you had returns the jquery object - what you could do is to get the value of the selected element and use that for the variable. The following code simply updates a variable and consoles it when you change the selected option of the select list.
$('#selectelement').on('change',function(){
var test = $(this).val();
console.log(test)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectelement">Change me </label>
<select id="selectelement">
<option selected disabled></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>answered Nov 13 at 7:29
gavgrif
8,2432717
add a comment |
Using the code you had returns the jquery object - what you could do is to get the value of the selected element and use that for the variable. The following code simply updates a variable and consoles it when you change the selected option of the select list.
$('#selectelement').on('change',function(){
var test = $(this).val();
console.log(test)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectelement">Change me </label>
<select id="selectelement">
<option selected disabled></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>answered Nov 13 at 7:29
gavgrif
8,2432717
add a comment |
Using the code you had returns the jquery object - what you could do is to get the value of the selected element and use that for the variable. The following code simply updates a variable and consoles it when you change the selected option of the select list.
$('#selectelement').on('change',function(){
var test = $(this).val();
console.log(test)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectelement">Change me </label>
<select id="selectelement">
<option selected disabled></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>answered Nov 13 at 7:29
gavgrif
8,2432717
Using the code you had returns the jquery object - what you could do is to get the value of the selected element and use that for the variable. The following code simply updates a variable and consoles it when you change the selected option of the select list.
$('#selectelement').on('change',function(){
var test = $(this).val();
console.log(test)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectelement">Change me </label>
<select id="selectelement">
<option selected disabled></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>$('#selectelement').on('change',function(){
var test = $(this).val();
console.log(test)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectelement">Change me </label>
<select id="selectelement">
<option selected disabled></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>$('#selectelement').on('change',function(){
var test = $(this).val();
console.log(test)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selectelement">Change me </label>
<select id="selectelement">
<option selected disabled></option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>answered Nov 13 at 7:29
gavgrif
8,2432717
answered Nov 13 at 7:29
gavgrif
8,2432717
answered Nov 13 at 7:29
gavgrif
8,2432717
answered Nov 13 at 7:29
gavgrif
8,2432717
8,2432717
add a comment |
add a comment |
You can always use
var test = ('#selectelement')[0];
or a more JQuery way,
var test = ('#selectelement').get(0);
to get the first element into the variable directly.
You can of course also use native functions like this:
var test = document.querySelector("#selectelement");
which will still give you the only element.
answered Nov 13 at 7:33
Ahs N
7,04711528
add a comment |
You can always use
var test = ('#selectelement')[0];
or a more JQuery way,
var test = ('#selectelement').get(0);
to get the first element into the variable directly.
You can of course also use native functions like this:
var test = document.querySelector("#selectelement");
which will still give you the only element.
answered Nov 13 at 7:33
Ahs N
7,04711528
add a comment |
You can always use
var test = ('#selectelement')[0];
or a more JQuery way,
var test = ('#selectelement').get(0);
to get the first element into the variable directly.
You can of course also use native functions like this:
var test = document.querySelector("#selectelement");
which will still give you the only element.
answered Nov 13 at 7:33
Ahs N
7,04711528
You can always use
var test = ('#selectelement')[0];
or a more JQuery way,
var test = ('#selectelement').get(0);
to get the first element into the variable directly.
You can of course also use native functions like this:
var test = document.querySelector("#selectelement");
which will still give you the only element.
answered Nov 13 at 7:33
Ahs N
7,04711528
answered Nov 13 at 7:33
Ahs N
7,04711528
answered Nov 13 at 7:33
Ahs N
7,04711528
answered Nov 13 at 7:33
Ahs N
7,04711528
7,04711528
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275840%2fsave-html-select-element-into-variable-without-creating-an-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
as per your error it seems like you are not including JQuery so please make sure to include it other wise error has occurred like $ is not defined.
– Rahul Dudharejiya
Nov 13 at 7:26
Do you want to hold it as pure html text?
– Ali Sheikhpour
Nov 13 at 7:31