Using placeholder as the typical id attribute in JavaScript - javascript

This question will probably either be extremely someone or flat out impossible. Inside of JavaScript how would I go about changing the value attribute of a input tag in html based on the placeholder value?
This question does sound dumb as a normal person would just set each of the divisions with different ids and change it that way. However, I’m creating an extension for a page with JavaScript that doesn’t have id values on the input tags.
Note: all of the placeholder texts are different, there are pretty much no id parent divisions except the wrapper, all the classes are the same for the input tag I wish to modify.
Thanks in advance. (It’s a dumb question I know. Forgive me)
Html I’m editing
<input type=“tel” maxlength=“1” placeholder=“1” value class=“UIInput-input>
It’s the same thing for the rest but each time the place holder goes up by one.

To find elements in the DOM based on attributes other than ID or Class, you can use the document.querySelector() method.
In your particular example, you would use it like this:
var newValue = 'my new value for my input element';
document.querySelector('input[placeholder="1"]').value = newValue;

Related

Is there a way to apply css to part of the element?

I am looking for a way to apply new CSS to only part of the element.
For example. The original HTML looks like
<p>123456</p>
I want to make only 456 into bold.
Of course, I can do it by adding another tag into 456 like
<p>123<b>456</b></p>
But in my application, I do want not to change the original DOM structure. By adding a new tag, I changed the DOM structure.
To do that, I am thinking of adding new custom attribute to the existing tag like
<p data-wms="e-3">123456</p>
Here data-wms means that there are special part and e-3 means that from index 3 character (it is 4 here) to the end will have a special attribute (like bold in this example)
Now I have all the information about where to change inside the element.
But still, how can I do that with javascript without adding a tag, without changing dom.
Thanks
You can use the span element to do so, it's made specifically to handle inline styling while mantaining the overall structure.
An example would be:
<p>123<span class="bold-highlight">456</span></p>
Thanks to everyone's advice, I researched more, especially about nth-letter.
Though nth-letter is exactly what I want, I found that it is still just proposal, not implemented in any browser.
Thus, there is no way to applying different css letter by letter in one text element without embracing each letter with span tag at this moment (2021-March). I hope that there will be nth-letter in the near future.
I think that I have to re-design my project...
if it's a static page and you want to change a style for specific text in a specific tag like the following case
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
let's say you want just style the third element, you can change it by the following code using jQuery for sure you can use JavaScript but jQuery will help you to make your code shorter
$( "p:nth-child(3)" ).css("color","#f00");

Set data attribute based on text of element?

Is it possible to set the value of a data-* attribute based on the text of the HTML element? Schematically, this is what I have in mind:
<div data-text={this.text}>example</div>
resulting in data-text="example".
I think it may be possible if you set an id and then get the element by that, like this:
<div id="exampleId" data-text={document.getElementById("exampleId").textContent}>example</div>
But this is not what I'm hoping for because it requires setting an id ahead of time (so may as well just set the data attribute ahead of time). What I'm aiming for avoids the need to set anything specific to the element ahead of time and uses a property of the element itself to set that.
Maybe this isn't even a well defined question! But figured I'd ask. Thanks in advance :)
You could use querySelectorAll and apply logic to each element that has a data-text attribute like this:
const elements = document.querySelectorAll("[data-text]")
elements.forEach(element => {
element.setAttribute("data-text", element.innerText)
})

Override DOM elements with javascript

In a nutshell I'm trying to target an element within the DOM, then inject a class on the fly to later alter that element.
The situation is as follows, I am working with an application that has predetermined mark up (Manage Engine). It's a tool for system work flows, creating a centralized portal for ticket logging, asset management blah blah. So I use the tool to create templates for end users to log service requests. This is accessed via a web interface portal which in turn obviously has mark up.
So far I have been able to alter specific things such as background colors on table headers for example. I achieve this by creating a rule to fire within that template upon load time. So essentially I am allowing the template to load with its predetermined code and then I am applying a for loop to alter the code once it has loaded. (Hacky I know, however its working really well).
The issue I'm running into now is that certain things within the mark up are generic (no class or id associated to the element). My plan is to target that specific generic element as a variable then add my own class to it upon load. Is there a way to target an element that has a class and then target the child elements within, save that child as a variable to then add a class on the fly with javascript. Please see example below.
<tr class=test1>
<td>
<input>
<input>
<input>
</td>
<tr/>
So with the example above what I am trying to achieve is add my own class with JavaScript to the <td> element. Obviously if i target just <td> it will alter all <td> elements within the markup. Can i get to that specific <td> via the <tr> parent with the test1 class. I am currently unable to use any jquery requests as the base code can not be touched.
Again I know this is a little backwards and hacky but it does work with anything I can specifically target (has a class or id). I need to be able to do this with pure JavaScript. Any suggestions or help is greatly appreciated, apologies if this is a noob approach or question, first time posting in a forum. Let me know if further examples or information is required.
document.querySelector("body").children can get all child elements of body
step1: Select the class. The variable t1 will contain an Array of tr elements.
var t1 = document.querySelector('.test1');
step2: Get the first value from the array t1. So, tr_el1 contains one tr element.
var tr_el1 = t1[0];
step3: Get the children of tr. td_el contains an Array of td elements.
var td_el = tr_el1.children;
Now you can use the td from the td_el array
var tr = document.getElementsByClassName('test1')[0]
var td = tr.children[0]
var inputs = Array.prototype.slice.apply(td.children)
Now you got your inputs inside an array. You're welcome ;-)
Thanks a lot for the assistance, really appreciate it. The examples above helped me build a hybrid that although not exact has given me the outcome i needed.
var parent = document.querySelector(".roweven").children;
var nS;
for (nS = 0; nS < parent.length; nS++) {
parent[nS].style.position = "absolute";
parent[nS].style.width = "100%";
}
I am yet to wrap this up in a function but working as intended. Thanks again :) :)

Go Through innerHTML to Find A Tag with Certain Class

I'm curious as to what the DRYest approach to grabbing an A tag with a certain class is if the A tag is buried within the innerHTML of an element. The innerHTML contains all sorts of divs and other A tags if that's necessary to know. Below is an example of what I'm talking about:
var content = something[0].innerHTML;
// I would want to see whether an A tag with say a certain class "button" exists within "content" then store that A tag in another variable.
Using innerHTML isn’t the best way to do this. Try:
var button = something[0].querySelector('a.button');
button will be null if there’s no match.
See also the docs for querySelector.

Change text in dynamically created textbox

I have a bunch of textboxes that are created dynamically one per click.
They all have the same name "discount[]", same id "discount" and have the same class "tinput".
Is there anyway that I can use to change the text in all of these textboxes with javascript or jquery?
I have another bunch of the dynamically created text boxes.
The id and name are unique but the class remains the same.
If it gets the job done, I can change the class name.
Anyhelp is greatly appreciated.
Regards,
You definitely shouldn't use an id more than once per document. If you need it for a <label> you might want to consider putting the input in the <label>.
You are using the class attribute the right way, though. You can do:
$('.tinput').val('New value for all .tinputs!');
If you can't put the input inside the label you can use use this. I made this demo for someone a little while ago. It might be helpful. It'll increment an id like "id-1".
http://jsbin.com/APegOMo/3/edit?html,js,output
same id "discount"
Please, don't do that! "id" is to identify a dom element. That hurts in my soul.
If every id is unique you could access them by $("#myid").val("my new val"). Just an example.
Regards, - Tobbo
here is a simple example that takes all elements with a particular class name and changes the .html, not 100% sure I understand what you're after though. if you need to do someting specific with each divs text you can iterate through them by id (and maybe class as well) and change each divs individual .html.
if you can share a stripped down example of your code or elaborate I'd love to try to help. good luck.
$(".changeDivs").html("adfasdf");
jsfiddle example >>

Categories

Resources