Get an attribute name with document.getelementbyid in js - javascript

Why is it doesn't work?
var x = document.getElementById('test').name;
alert(x); // jhon
<div id='test' name='jhon'> its just a text </div>

Div elements are not allowed name attributes, so there is no matching property for them on the DOM.
If you want to store custom data on an element, use a data-* attribute.
If you really want to use invalid HTML you can access it with the getAttribute method.

You will have to use getAttribute method to get value of any attribute of html element
var x = document.getElementById('test').getAttribute("name");
console.log(x)
<div id='test' name='jhon'> its just a text </div>

Try this:
var x = document.getElementById('test').getAttribute('name')

Related

How to find and add the function to id?

I want to add a function to the attribute onChange of the element with id="custom-taxonomy". I don't want to edit the file.
I want to have a javascript solution.
My idea is to find the element by the id and then add the function.
How can i achiev this idea?
The code:
<div id ="custom-taxonomy">PRODUCT PRICES</div>
Expected result:
<div id ="custom-taxonomy" name="custom-product" onchange="return chothuephuongxa();>PRODUCT PRICES</div>
you can do that using setAttribute() and document.getElementById
let elm = document.getElementById('custom-taxonomy')
elm.setAttribute('name',"custom-product")
elm.setAttribute("onclick","return chothuephuongxa();")
console.log(elm.outerHTML)
<div id ="custom-taxonomy">PRODUCT PRICES</div>
Note:
You can't use name attribute of <div> but using elm.name = ... because name property in not available on <div> elements.
Similarly elm.onclick = "return chothuephuongxa();" is not correct because this will set event to string instead of function
You can use setAttribute to add attributes to elements:
document.getElementById('custom-taxonomy').setAttribute('name', 'custom-product');
the same can be done for your event.

How to print the value of a web element in console?

I have a web element which I have found css selector for and now I want to print its value in console. How to achieve this?
Not sure what exactly you mean by value
In html these tags will have value attribute
<button>, <option>, <input>, <li>, <meter>, <progress>, <param>
For example
<button type="button" value="1" id="myButton">My button</button>
Here you can use a id selector(or any other relevant selector) to get the DOM element
var _getValue = document.getElementById('myButton').value; // will give 1
Now use console.log like console.log(_getValue) which will log the value in console of developer's tool
If your looking for text inside element like span you have to do innerHTML or textContent to get the text
<span id ="myspan"> My Span </span>
var _getValue = document.getElementById('myspan').innerHTML;
console.log(_getValue)
If you fetched the element by:
var x = document.getElementsByClassName("classNameHere"); you'll have an array of HTML elements. Extract the first element:x = x[0]; than get the content by console.log(x.innerHTML());
If your element is an input use console.log(x.value) to get the value.
If you have the following:
<input id="myValue" type="textbox" value="foo bar">
You can log the value like so:
var elem = document.getElementById('myValue');
console.log(elem.value);

How to get the div you want to delete by using its name

I've saved the name of the DIV I want to delete in a variable with JQuery.
I want to delete this div with JQuery. I tried this code:
var list = $('#myLists .list').attr('name') == oberpname; //oberpname is the variable with the name
for (index = list.length - 1; index >= 0; index--){
list[index].parentNode.removeChild((list[index]));
}
//$oberpname has the same name as in oberpname in JQuery above
<div id="myLists">
<div class="list" name=$oberpname></div>
</div>
When I run this code nothing happens. How can I refert exactly to div with JQuery?
EDIT NOTE:
Deleted some mistakes like the ID.
Use Attribute Equals Selector and than .remove()
$('#myLists div[name="oberpname"]').remove();
First of all your markup is invalid. Add name attribute value in quotes.and use:
$('#myLists div[name="oberpname"]').remove()
or from variable:
$('#myLists div[name="'+oberpname+'"]').remove()
You can just use:
$('#myLists div[name=oberpname]').remove();
instead of looping like what you're doing at this moment.
Use attribute selector
var oberpname = "somename";
$('div[name=' + oberpname + ']').remove();
for correctness, the element div does not have the "name" attribute. you may use id, class, or data-*, such as data-name.
<div class="list" data-name="custom-name">
...
</div>
if using data-name (assuming oberpname='custom-name'),
$('#myLists [data-name="'+oberpname+'"]').remove()
I'm not sure why you want to use variable in the HTML, as you can't do it like the one in your example. If you want to assign a variable for data-name via jQuery, you should target the element with a specific class then add attribute.
<div class="list">
</div>
your script should look like:
var customName = 'custom-name';
$('.list').attr('data-name',customName);
$('#myLists [data-name="'+customName+'"]').remove()

get the value of hidden parameter present in a div using jquery

I have a div whose id is "mainDiv" and a hidden field is in this div whose class name is "myHiddenField". Now I want to get the value of that hidden parameter using jquery.
I have tried:
$("#mainDiv .myHiddenField").val()
and
$("#mainDiv .myHiddenField").attr('value')
$("#mainDiv .myHiddenField").val()
This is a fairly straightforward combination of $, find, and val:
var value = $("#mainDiv").find(".myHiddenField").val();
Or you can omit the find part by using a descendant selector instead:
var value = $("#mainDiv .myHiddenField").val();
var value = $('#mainDiv > .myHiddenField').val();
Use a combination of id- and class-selector, so that you select the element of class myFiddenField that has an ancestor with id mainDiv. When you have selected the proper element, you use .val() to get the value of that element.
Something like this:
$("#mainDiv .myHiddenField").val()
HTML part :
<div class="myHiddenField">hidden value</div>
JS Part:
var x = $('.myHiddenField').html();
Here x gives the value of your hidden div.

getting the value of a div in jquery?

i wanted to get the value of a hidden div in jquery i.e.
<div id="text">hello i am the value, you want</div>
and i want insert this value into a another div in jquery i.e.
$('#bio').html($value);
EDIT:
i forgot to mention that it had to be the text within the block div sorry i.e. its parent
<div class="block" id="status_13">
<div id="text">.......</div>
</div>
i.e.
$('.block').click(function(){
$('#bio').html($('$text').html());
If your #text element contains HTML you might want to do:
$('#bio').html($('#text').html());
If you are only concerned with the literal text of #text then you can do:
$('#bio').text($('#text').text());
Of course, if you want to store the text in a variable first, you can do so:
var textValue = $('#text').text();
$('#bio').text(textValue);
In regard to your later edit:
$('.block').bind('click', function() {
var thisTextValue = $(this).children('.text').first().html();
$('#bio').html(thisTextValue);
});
Notice that I assumed the child div is marked with a class and not an id. Based on your description, it sounds like you have multiple "block" elements which each contain a "text" element. If that is the case, then $('#text') will always return the first "text" element in the document; IDs are unique in the document.
Don't use $ for variables (like $value), just value
var value = $('#text').html();
Did you try
$('#bio').html($('#text').html());
I think this would work
//get the value from hidden field and store it in the variable 'valueYouWant'
var valueYouWant = $("#text").html();
//set it in other field
$("#bio").html(valueYouWant);
edit:
More information can be found here

Categories

Resources