How to find and add the function to id? - javascript

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.

Related

Get an attribute name with document.getelementbyid in js

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')

How to click on a custom attribute in selenium?

I have this following html:
which has a class and a custom attribute, I have several header's with the same className. I wanted to know how to uniquely get this element and click on it.
<h4 class="font-white topic-heading progress-header no-margin width-80 d-table-cell" data-collapse-id="1">I. Introduction</h4>
This is what i tried:-
I tried to get the attribute of the class="font-white..." with data-collapse-id="1" :
var element = driver.findElement(By.xpath("//*[#class='font-white topic-heading progress-header no-margin width-80 d-table-cell']")).getAttribute('data-collapse-id="1"');
console.log(element); // this prints a promise.
element.click(); //element.click is not a function exception
I also tried:-
var element = driver.findElement(By.xpath("//*[#data-collapse-id='1']"));
element.click(); // element.click is not a function exception.
I wanted to know how to fetch this element in selenium and click on it.
this is the entire div:
<div class="page-width d-table topic-heading-div">
<h4 class="font-white topic-heading progress-header no-margin width-80 d-table-cell" data-collapse-id="1">I. Introduction</h4>
<i class="fa fa-check font-white font-18 width-20 d-table-cell text-center vertical-center" aria-hidden="true"></i>
</div>
Did you try:
driver.findElement(By.cssSelector("h4[data-collapse-id='1']")).click();
Finding element through this attribute should work because this is unique. Also it sometimes unable to click on element found by xpath. I think this should work
It seem that your element variable intends to return attribute. However, getAttribute() method should receive attribute name value as argument and return an attribute value which is a simple string... And here you got few problems:
you're trying to pass wrong argument: 'data-collapse-id="1"' instead of 'data-collapse-id'
attribute value, a string, is not clickable!
Simple answer to your question- there is no way you can click on a custom attribute
Class is meant to define a group of elements having similar features. In this case, the topic-heading class is used to group the <h4> tags alongwith a unique ID attribute called as data-collapse-id. But in such case's we can't use ID to identify/specify each web element as the elements of same class can be hundreds/thousands.
You can try locating any header element uniquely using the following ways:
var exactHeadingText = "I. Introduction"; // Exact heading
By locExactTopicHeading = By.xpath("//h4[contains(#class,'topic-heading') and text()='"+ exactHeadingText + "']");
var partialHeadingText = "Introduction"; // Partial heading
By locPartialTopicHeading = By.xpath("//h4[contains(#class,'topic-heading') and contains(text(),'"+ partialHeadingText + "')]");
Ideally you should pass the exactHeadingText/partialHeadingText as a function parameter/argument so that the code can be reused to fetch any topic heading.
You can then use findElement() and perform any operation on it.

Getting the value of an input element in jquery

I would like to get the value of a input using a the a chain class as the identifier in jquery. is this possible?
I have the following code
<input class="donate-block__value monthly" type="text" id="donation-amount" name="DonationAmount" value="200" />
and i have tried the following which has resulted in undefined
var monthlyDonation = $('.donate-block__value .monthly').val();
var monthlyDonation = $('donate-block__value monthly').val();
console.log(monthlyDonation);
I need to target the class Can this be done please?
Don't add space between your classes or jquery will start to search within the first class looking for a child element. use it like this:
var monthlyDonation = $('.donate-block__value.monthly').val();
You can also target just the input element in case you have multiple elements with that class defined:
$('input.donate-block__value.monthly').val();
Your selector .donate-block__value .monthly is referring to an element within an element. Try just .donate-block__value or .monthly

Get reference of object inside of div

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");

Put an id to a parent element

I wanted to put an id in my element's parent element. Below is my code:
<div>
<div id="child"></div>
<div>
Im aware that jquery has a way to select a parent element , but I dont know how what method shall I use to put an id to it. Below is my jquery code:
div_resizable = $( "#child" ).parent();
div_resizable.id = "div_resizable";
Above code doesnt work with me. It doesnt throw an error, but no changes had taken effect. Any solution to my problem?
For achieve what you want, you can use the jquery attr:
$("#child" ).parent().attr('id', 'newID');
Or you can use the prop:
$("#child" ).parent().prop('id', 'newID');
And you can check the difference between the two here: difference between prop() and attr()
Of course div_resizable.id = "div_resizable" doesn't work. div_resizeable is an jQuery array and you are trying to assign id to it.
Try .attr instead:
$("#child").parent().attr({id: "div_resizable"});
To set a property on the first element inside a jQuery result object:
div_resizable = $( "#child" ).parent()[0];
// ^^^
div_resizable.id = "div_resizable";
This picks the first Element from the result so that you can directly access the property.
Or:
$('#child').parent().prop('id', 'div_resizable');
Use the .prop() helper method to accomplish the same thing.

Categories

Resources