i'm trying to get the value from the ID => vname into the variable name
and the return should be "Loren",
I tried with and without the value attribute call but doesn't work. what am i missing?
<html>
<head>
<script>
var name = document.getElementById("vname").value;
alert(name);
</script>
</head>
<body>
<p id="vname" value="firstname">Loren</p>
</body>
</html>
There are three things wrong here:
You are trying to access the element before it exists You cannot eat the pizza before it is delivered... See Why does jQuery or a DOM method such as getElementById not find the element? for more info.
<p> HTML elements do not have a value attribute. In your case, value is a non-standard HTML attribute. If you want to use custom attributes, use data-* attributes instead.
p DOM elements do not have a value property. Only form control elements (input, select, etc) have such a property. If you want to get the content of an element, use innerHTML or textContent instead.
If you had opened your browser's console, you would have seen an error, because the element with ID vname couldn't be found. Make yourself familiar with your browser's developer tools so that you can fix issues like this on your own.
You can't get the "value" of a p element, you have to get the "innerHTML"
try this: var name = document.getElementById("vname").innerHTML;
Try var name = document.getElementById("vname").innerHTML;
When you try to access the #vname is not in the DOM yet. You will need to add the script tag after the element or wait for the DOM to be loaded.
When that is said a <p> tag cannot have a value. Use data-value instead:
<p id="vname" data-value="firstname">Loren</p>
<script>
var vname = document.getElementById("vname");
var value = vname.getAttribute('data-value');
console.log(value);
</script>
Related
I am trying to remove the content referenced by the following id:
<...id href="https://xyz'...>
My code:
var right = document.getElementById('https://xyz');
var parent = right.parentNode;
parent.removeChild(right);
The problem is when I reference the name of the id, it comes back as null. I tried document.getElementById('https://xyz').href, yet still null. Any suggestions?
Thanks.
You probably want to use document.querySelector:
var right = document.querySelector('[href="https://xyz"]');
or if you need the n-th match, document.querySelectorAll:
var right = document.querySelectorAll('[href="https://xyz"]')[n];
getElementById as the name suggests, selects an element by id so you have to define an id on your element: id="some_id" and then in JavaScript document.getElementById('some_id')
That's because you did not assign any ID to that tag. So document.getElementById('https://xyz') won't give you anything because there is no tag with this ID.
You have to assign an ID like this:
<...id="ID_of_href" href="https://xyz'...>
Then you can get it with:
document.getElementById('ID_of_href')
First of all we got to understand what is the html id attribute.
Definition and Usage
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet,
and by JavaScript (via the HTML DOM) to manipulate the element with
the specific id.
According to this link: https://www.w3schools.com/tags/att_id.asp.
W3schools is a great web site for you to learn web development.
How to achieve your purpose:
const barElement = document.getElementById('bar');//Getting the element which id is bar.
console.log(barElement);
const fooElement = barElement.parentNode;//Getting bars parent.
console.log(fooElement);
<div id="foo">
<a id="bar" href="#"></a>
</div>
Trying to get the value of a specific tag in HTML, but I can't find a proper way to do it.
Let's say I have the following HTML code:
<body id="en" class="that-great-class " number_id="1534" support="clp" source="desktop">
How can I get the value from number_id, support and source ?
Already tried this but doesn't work.
document.getElementsByTagName("number_id");
Thanks.
So your js is only slightly off, you are using getElementsByTagName which will get HTML elements by their tag e.g. body tag, header tag, div tag and so on.
You are wanting to get the attribute of the body tag so you first would need to get the body tag.
const bodyTag = document.getElementsByTagName("body")[0];
This gets all elements with the tag name of body and puts them in the array, but there should only be 1 body tag so you get the first.
You then want to get the attribute of 'number_id', to do this, you would do
const numberId = bodyTag.getAttribute("number_id");
document.querySelectorAll('[number_id="1534"]')
The related docs are Attribute_selectors and querySelectorAll
Your method name is incorrect it should be plural if you use tagName getElementsByTagName
But didn't actually correct with what you are trying to use
Getting element by tag means like HTML tags Ex - li, h1 body not
their attributes
Use querySelector instead.
const el = document.querySelector("[number_id='1534']")
console.log(el)
<body id="en" class="that-great-class " number_id="1534" support="clp" source="desktop">
Have you tried this?
var id = document.getElementById("en").getAttribute("number_id");
Say, I've a <script data-src = "script.js"> somewhere in my DOM without any id or other identifiable attribute set. How could I select that element so that I can reset that element with correct src.
Like:
var el = //code
el.src = el.dataset.src;
Maybe I could loop all script tag and all, but is there a way to get specific element by just this info?
EDIT:
With pure javascript.
you can use query selector as following :
element = document.querySelectorAll("script[data-src]")[0];
This can be done with JavaScript's querySelectorAll()
// Get the first script tag with the data attribute "data-src"
var theScript = document.querySelectorAll("script[data-src]")[0];
// write the data-src to the document
document.write(theScript.getAttribute('data-src'));
<script data-src="testing.js"></script>
Use $(document).find('[data-src]') to get the object. Note, if you have more objects with data-src then you have to loop through them.
$(document).find('script[data-src]').attr("data-src", "News link")
console.log($(document).find('script[data-src]').data("src"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-src="script.js"></script>
Try this...
with pure Js.
var el=document.querySelector('script[data-src]');
console.log(el.dataset.src);
el.dataset.src='correct-src.js';
console.log(el.dataset.src);
<script data-src = "script.js">
</script>
<div></div>
jQuery:
$("script[data-src='script.js']")
For more details https://api.jquery.com/category/selectors/
Javacript:
document.querySelector('[data-src="script.js"]')
Form more details see here
I am new in javascript.I am trying this below code to get href attribute.
Facebook
<script type="text/javascript">
function cheak()
{
var a= document.getElementsByTagName("a").getAttribute('href');
alert(a);
}
</script>
I know this is working by below code
document.getElementById("myid").getAttribute('href'); // if I use any id
But in tag I don't want to use any id or class. How can I get this attribute without using any id or class in a tag.
Preface: Below, I've answered the question of how to find an element without using an id or class, in the general case. But if you just want the element from within your cheak function, then Zain's answer is the correct way to do that (with minimal changes to your code; arguably more correct might be modern event hookup).
But in tag I don't want to use any id or class. How can I get this attribute without using any id or class in a tag.
You reach for the Swiss army knife of element selection: document.querySelector. With it, you can use any CSS selector that matches the element:
var href = document.querySelector("any selector here").getAttribute("href");
querySelector returns the first match in the document. (There's also querySelectorAll, which returns a list.) They're both supported in all modern browsers, and also IE8.
Since you have the full power of CSS selectors, you can use anything about the position of the element in the document to find it.
There's too little context in your question for a specific example, but for instance if it's the first a in the document:
var href = document.querySelector("a").getAttribute("href");
alert(href);
Facebook
Or using that onclick:
var href = document.querySelector("a[onclick='cheak()']").getAttribute("href");
alert(href);
Facebook
If you pass in this when calling the function. it will pass the element reference to your function and you can use it to get value of href:
Facebook
<!-- Note -----------------------------^^^^ -->
<script type="text/javascript">
function cheak(a) {
alert(a.href); // Gives you the fully-resolved URL
alert(a.getAttribute("href")); // Gives you the content of the `href` attribute (not fully-resolved)
}
</script>
the parameter data is the complete tag on which the function is called
Facebook
<script type="text/javascript">
function cheak(e)
{
e.preventDefault();
// var a= document.getElementsByTagName("a").getAttribute('href');
alert(e.target);
}
</script>
is it possible to "override/overwrite" an input element fixed value using javascript and/or jquery?
i.e. if i have an input element like this:
<div id="myDiv">
<input type="text" name="inputs" value="someValue" />
</div>
is it possible to make a jquery object of that element and then change its value to something else then rewrite the jquery object to the dom??
I'm trying but obviously I haven't got good results!
I've been trying something like this:
$('input').val("someOtherDynamicValue");
var x = $('input');
$("#myDiv").html(x);
If you just want to manipulate the value of the input element, use the first line of your code. However it will change the value of every input element on the page, so be more specific using the name or the id of the element.
$('input[name=inputs]').val("someOtherDynamicValue");
Or if the element had an id
$('#someId').val('some Value');
Check out jQuery's selectors (http://api.jquery.com/category/selectors/) to see how to get whatever element you need to manipulate with jQuery.
You can directly access the value via the $.val() method:
$("[name='inputs']").val("Foo"); // sets value to foo
Without needing to re-insert it into the DOM. Note the specificity of my selector [name='inputs'] which is necessary to modify only one input element on the page. If you use your selector input, it will modify all input elements on the page.
Online Demo: http://jsbin.com/imuzo3/edit
//Changes on the load of form
$(document).ready(function(){
$('#yourTxtBoxID').val('newvalue');
});
//Changes on clicking a button
$(document).ready(function(){
$('#somebuttonID').click(function(){
$('#yourTxtBoxID').val('newvalue');
});
});