The clear button isn't working to clear list-group history
//html
<button class="btn btn-primary mb-3"
type="button"
id="clear-inputs"
onclick="clearIt()">
Clear history
</button>
<form id="history"></form>
<div class="list-group" id="history"></div>
//javascript clear button function
function clearIt() {
document.getElementById('history').value = "";
}
You have two elements with the same id (the <form> and the <div>). Browsers will render this, but it is invalid html, as the id attribute is supposed to be unique to an element. getElementById() is going to grab the first element with the designated id.
The second problem with your html is that neither form or div elements have a value attribute, so there is nothing for your function to clear. It is unclear from your example which element is supposed to be cleared by your button. For the <div>, you could try setting document.getElementById('yourUniqueId').innerHtml = "". That will clear any html inside of the <div>.
You don't need javascript for clear button, you can just use html for clear button only in form tag. Use for clear.
Here is a simple example: example
you have two 'history' id's - not a good practice
use 'innerhtml' instead of value - will yield much better results. value is better for like inputs like a
Make sure you provide a unique ID for your elements,
2 elements above has the same ID, also the function must be defined before calling it.
Always check your Console for logging/errors :)
Related
I have a brief quesiton about the nautre of jquery.
I tried to change the class name of an element using Jquery by using the argument below.
var classman=$('body').find('div')[2].className('anything')
body has several different divs and I picked the third one by
using .find('div')[2].
When I logged it, .find() argument spits out the whole html line
and I checked the type of it and console says it's "object"
So I was expecting I could access tot he element by typing like
classman.class
but neither the first approach nor the second approach didn't worked out. What should I do to change the second element and the change the class?
Thank you in advance.
I'm not a heavy user of Jquery but Just curious about it and wanted to know how to do it as a basic knowledge.
To add a class in jquery you can do this as follows:
$('body').find('div').addClass('name')
console.log($('body').find('div').attr('class'))
<body>
<div class="test">
</div>
</body>
To get the classes of an element we use attr ('class') in jquery.
In your example you said you wanted to take the second element, to do this use the method eq, (eq. (1))
Example:
$('body').find('div').eq(1) // Get second element
Trying to learn some Javascript now that I have a few months of Python under my belt. Having trouble with HTML elements on a page which uses Javascript (not sure that is the right wording).
I have a simple Chrome Extension which I am trying to tell it to click a button when the page loads.
The DOM shows this code more or less:
<body class="skin-mark toolbar-open table-active">
<div class="tile-tables"></div>
</body>
My attempt at clicking the button has been multiple ways similar to this:
document.querySelector('#tile-tables').click();
Any help in understanding the process here and what I am doing wrong would be great! Thanks in advance! Feel free to correct me at any place and I will fix my language.
When you use getElementById you have to pass an element's id to it. There is only one element with an id in your HTML, the outer userActActions-51 - so, if you were to select by ID first, you would do
document.getElementById('userActActions-51')
and then you would access the second nested child:
const userActions = document.getElementById('userActActions-51');
const span = userActions.children[0].children[0];
span.click();
But it would be more convenient to use querySelector for this, which will allow you to use a selector string to select the span descendant of the element with the id userActActions-51 at once:
document.querySelector('#userActActions-51 span').click();
If the element might not exist, then make sure that it exists before trying to click on it:
const span = document.querySelector('#userActActions-51 span');
if (span) span.click();
I have 2 questions, both regarding clicking via js.
So I am on a site and I wish to automate a physical click on 2 buttons, I learned that if we getElementbyId.click() we can do this. But both these buttons do not have an ID. I tried coordinate clicking and it doesn't work and also by the class but to no avail.
<td data-pick="red" class="red" rowspan="2"></td>
How do I click on this?
and also
<button type="submit" class="btn btn-default btn-success">GO</button>
and this.
document.getElementsByClassName doesn't work :(
Give this a try
document.getElementsByClassName('red')[0].click();
Why [0] ? because getElementsByClassName returns classes (matching DOM elements) in form of an array, so [0] is the index here :-)
And for your second button you can trigger the click using
document.querySelector("button[type=submit]").click();
By the way if you are using jquery then why don't you use
$(".red").click();
$("button[type=submit]").click();
Anyways both solutions should work.
Hope that helps :-)
Use jQuery..
$('td[class="red"], button[class="btn btn-default btn-success"]').click();
It is possible to trigger a click using document.getElementsByClassName but you have to understand what you get back from document.getElementsByClassName is not an individual element, but a list which you can iterate over.
You can trigger a click for every item in a collection by doing the following:
var redClassElements = document.getElementsByClassName('red');
for(var i=0;i<redClassElements.length;i++) {
redClassElements[i].click();
}
This will do nothing if you haven't assigned a click handler to the element click() is being called on though.
Also, do you really want to trigger a click on multiple elements? Your best bet is to assign the element an id as has been suggested to you. You can then use document.getElementById('theId').click().
I've got some html and this html conatains somewhere deep in the dom the following div:
<div class="barbottomleft arrow " onclick="go('login')">
As you can see there is no id or whatever and it is a div among a lot of others. However, the onclick="go('login')" makes it unique in the whole document. Therefore I'd like to select it somehow and the click on it. Something like:
javascript:document.getElementById(\"element_id\").click();
However, this is not possible since it got no id but a unique onclick function call. So is there a possibility to select this element based on the function it is going to call?
You could use a query selector with a lot of accuracy as such:
var myElement = document.querySelector('.barbottomleft.arrow[onclick="go(\'login\')"]');
This gets you an element with the two class and matching onclick attribute value. You could make it even more accurate by making sure it's a div:
var myElement = document.querySelector('div.barbottomleft.arrow[onclick="go(\'login\')"]');
I hope that helps.
I write something like this:
<form>
<input>text</input>
<div><span id="test">text</span></div>
.................
<button onclick="submitStudnetForm(this);"></button>
</form>
function submitStudnetForm(form){
alert(form['test']);
}
but it return undefined, and I don't where is wrong?
Thx in advance.
First off, this references the button rather than the form. Even if it did reference the form, the form element only contains references to input elements by name (not by id). You should use document.getElementById('test') instead. This assumes that there is only one such span on the page as there should be because ids must be unique.
Others have already said what I wanted to say. Also, is there a reason you're using a button with onclick to submit the form, rather than just input type="submit"? This way, users with javascript turned off won't be able to use that form.
(I can't insert this as a comment for some reason - I guess my reputation is too low for that?)
You're passing this, which is the button and you're trying to pull a property from it called test, which doesn't exist.
Form is not an array (it's a reference to a button element in this case) with an index named 'test'. when referring to elements by id you should use document.getElementById('test').