Get reference of object inside of div - javascript

I'm trying to reference an object inside of a div, using plain JavaScript:
<div id="main">
<div id="search">
<input type="text" id="query" />
<button onclick="test()">OK</button>
</div>
</div>
<script>
function test() {
try {
var main = document.getElementById("main");
var search = main.getElementById("search");
alert(search);
} catch (e) {
alert(e);
}
}
</script>
But I keep getting this error:
TypeError: main.getElementById is not a function(…)
Referencing main works, but not what's inside of main.
I also set up a Fiddle.

To find an element inside of other use querySelector
document.querySelector('#main #search')
As ID is unique, you can directly use
document.getElementById('search')

The reason for the error is there is no method called getElemetnById() attached to the Element object.
Since ID of an element must be unique there is need to do that, just use document.getElementById().
But if you want to make sure the said element is a descendant of anotehr element you can use document.querSelector('#main #search')

DOM Elements don't have getElementById method. Only document object have this method.
Id attribute specifies a unique id for the element.
It means only one element can have id="search". So you can use document.getElementById("search");

Related

Can't get button to disappear

I am trying to get this button to disappear when it is clicked, however, it does nothing when clicked
HTML
<button id="startButton" onclick="startButton()">
<img src="Img\MainMenu\button(play).png">
</button>
<script type="text/javascript" src="Client\js\placeholder.js"></script>
JavaScript
startButton.onclick = function startButton() { // when start button is clicked
startButton.style.display = "none";
};
You should learn a bit more about HTML and JavaScript before you start coding. Your code has some fundamental errors.
To reference an element uniquely in JavaScript, you'll need to use document.getElementById:
The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
If you need to get access to an element which doesn't have an ID, you can use querySelector() to find the element using any selector.
Source: MDN
<button id="startButton">
<img src="Img\MainMenu\button(play).png">
</button>
<script>
const $startButton = document.getElementById('startButton')
$startButton.onclick = () => {
$startButton.style.display = 'none'
}
</script>

using scrollIntoView function to specific HTML tag

I'm using scrollIntoView function to click on a link and have it jump to a different part of my web app. The issue i am having is that i dont know how to target an HTML element called 'identifier'
so my html looks like...
<div class="subpara" identifier="2b">
<num value="b">(B)</num>
<content>some conent</content>
</div>
I want to be able to target the 'identifier' 2b in this case
i tried using:
onClickOutlineNav(id) {
let element = document.getElementById(id);
//scroll to identifier
element.scrollIntoView();
}
and it doesnt seem to be working..any ideas?
You're using incorrect html tag syntax, which would be your first problem.
<div class="subpara" id="2b">
The getElementById function looks for the "id" property on html tags, not the "identifier" property.
If you insist on using the "identifier" property, you can query for it like so:
let element = document.querySelector('[identifier="2b"]');
or more generically:
let element = document.querySelector(`[identifier="${id}"]`);

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 pass/extract text from span?

How to pass value of span to callback on click ?
<span class="test" onClick="testFunction(this);">Test</span>
function testFunction(e) {
alert(JSON.stringify(e));
}
But I always get in alert
{}
How to pass/extract text from span ?
I need to have onClick inside tag, not to attach on another way.
You are passing the element to the function correctly.
It's when you use JSON.stringify that you don't get any result. The element only has members defined in its prototype, it doesn't have any members added to the object instance itself. The stringify function only includes members of the object instance, not from its prototype, so you get the same as if you called it on an empty object.
If you get some property from the element and show that, you see that you actually have a reference to it:
function testFunction(e) {
alert(e.tagName); // shows "SPAN"
}
or:
function testFunction(e) {
alert(e.innerHTML); // shows "Test"
}
Demo: http://jsfiddle.net/F3S4T/
You could do something like:
<span class="test" onClick="testFunction(this);">Test</span>
function testFunction(elem) {
alert(elem.innerHTML);
}
To get the content inside the span tags (or any HTML tags) you can use the innerHTML property of the element. E.g,
function testFunction(e) {
alert(e.innerHTML);
}

javascript-getelement

what type of values given to getElementById() method
getElementById expects a string.
The following code:
var element = document.getElementById('myId');
finds the following element and assigns it to element
<div id="myId"></div>
just pass the id of any element
like <input type="text" id="text" />
just use getElementById("text")
a single DOM object, of a specialized class depending on the nature of the element identified by the given ID

Categories

Resources