Changing value of span (Javascript) with Tampermonkey - javascript

I have a question regarding the modification of a value inside a class. I would like to change the value with Tampermonkey extension however I cant get it to work.
The initial code looks like this:
<div class="bzeTileValue bzeTileValueNegative">
<span class="bzeTileUnit">YYY</span>
<span>XXXX</span></div>
I would like to change the value of XXXX. Preferably before the site loads.
I tried already the document.getElementbyId("xxxxx").innerHTML=....; But couldn't get it to work unfortunately. Any help would be hugely appreciated.
Thanks a lot friends

The span containing XXXX is inside a div which has classes on it but no ID. This means that getElementById won't work. You can use Document.querySelector to get the div and then access the child nodes of that div. The span you are trying to access doesn't have any classes on it, but you can target it as the second child inside the div. Then you can change the value using innerHTML or innerText.
Altogether it looks like this:
document.querySelector('.bzeTileValue').children[1].innerHTML = 'New Value';

Related

Change innerHTML to id and add div to <p> with querySelectorAll

I'm new to javascript. I'm trying to have my h1 show the title of the document instead (which is also Document by the way). Instead, it recognises 'title' as string and not as an id. I don't know what I'm doing wrong here. I also tried to add my roze div class to by using querySelectorAll, but this also is not working. Who can help me? I'm sure its something simple but I've been trying to understand this for the past 3 days...[][][][]
I've tried to use no '' in ('h1'), ('title') and ('p'). I've tried using . and # before ('h1'), ('title') and ('p'). I've tried removing id from title tag and h1 and have googled for methods but I still can't find an example of the specific method I have to do.
To get an DOM element by its id you should use document.getElementById('title'). To edit its text you should use its textContent property. The title of the docuemnt is stored in document.title.
Try the following markup:
document.getElementById('title').textContent = document.title
<h1 id="title">Dit is h1</h1>

How to make iron-data-table scroll document?

I understand that <iron-data-table> is based on <iron-list>, so I tried to set the attribute of the table's inner <iron-list> like this:
$('iron-list').removeAttr("on-scroll");
$('iron-list').attr("scroll-target","document");
I also tried to select the list this way document.querySelector('iron-list')
But none of them works, so what is the correct way to make it scroll the page instead of scrolling the table itself?
Try to use querySelector. Get the element by using querySelector and use setAttribute function. For example
this.querySelector('#id').setAttribute("scroll-target", 'document');
To remove attribute, use .removeAttribute()

DIV with two tags?

I know how to deal with more than one class in div but I never seen something like that:
<div data-reactroot>
</div>
It is not a class, not a ID it looks just like multiple tag. How am I supposed to select it with jQuery? I tried
$('div data-reactroot');
But it seems that I'm not even close to it.
Try to use has attribute selector at this contex,
$('div[data-reactroot]');
Since data-reactroot is an attribute of div element.
As written, it is an attribute and here is how to get it with plain javascript using the querySelector
var elem = document.querySelector('div[data-reactroot]');

Select all classes using jquery with the same inner html

I need to be able to change the innerHTML of a class, based on the innerHTML of that class, however, the text of that class is different from regular text (has it's own css and what not), and it needs to retain such properties, so I can't use text() I have
<span class="special">John</span>
And I need to change all classes with the special attribute, and innerHTML of John, to Jack.
however, for whatever reason
$("[special='John']").html('<span class="special">Jack</span>');
is not working. I'm sure it's just a silly mistake, but thank you in advance.
Like this?
$(".special:contains('John')").html('Jack');
Or, if the text needs to be equal to, rather than contains:
$('.special').filter(function() {return $(this).text() == "John";}).html('Jack');

how do i change contents of a div within a div?

What I am trying to do is change the contents of a div within a div. I can't seem to access it.
dialog is the parent while dialogChange is the child.
When I do:
$("#dialog").text("New Text");
It'll replace everything within the parent, dialog.
But when I do:
$("#dialogChange").text("New Text");
Nothing changes.
So how can I access the child within a parent?
If you do $("#dialog").text("New Text");, this will effectively remove dialogChange, so $("#dialogChange").text("New Text"); won't work.
Instead of using the text method, which replaces the entire contents of the div, you should try some of these methods:
.before()
.after()
.append()
For example, you could use $("#dialogChange").before("New Text") to insert something before that div.
Play around for the exact effect you want, and use the API as a guide:
http://api.jquery.com/
How about something like this:
$('parent').find('child').text('New Text');
Your jQuery looks good. Possibly the problem is in your HTML.
Or by any chance have your replaced the contents of the parent (and therefore deleted the child) before you call the code affecting the child?

Categories

Resources