I'm looping through all elements of a certain class on a page and editing the text of an tag in that class with a certain id. I'm referencing the element with $(this).find('#time') and trying to change the text of that object using $(this).find('#time').text("test"), but the the text of the element isn't changing and I can't figure out why.
EDIT:
$('.box').each(function(i, obj){} This is what the loop is, the odd thing is that when i simply reference the text with $(this).find('#time').text() i receive the correct output. But the text won't change when using .text().
Here is the code im using to change the object text:
var time = response.substring(7, 15);
var user = response.substring(16, response.length);
$(this).find('#time').text(time);
$(this).find('#name').text(response.substring(user));
Game Page
<div class="box">
<h1>${{ game_object.amount }}</h1>
<h2 id="time">{{ game_object.start_time}}</h2>
<p id="name">{{ game_object.current_top_user }}</p>
CLICK NOW
</div>
Try to use .html
$(this).find('#time').html("test")
or maybe this can help you:
$('body').find('#time').text('test');
Because the ID of an element must to be unique
Related
On a project I'm working on, a HTML file is defining a Javascript template used on selection buttons. All buttons have a "Change..." label that I want to localize (set dynamically). In other cases I'm searching for the element ID and setting the InnerHTML accordingly. But in this case, the ID of the buttons are defined dynamically. Is it possible to have a text element inside the button element, search for this element, and set its InnerHTML value?
<script id="optionSelectionTemplate" type="text/x-handlebars-template">
<div class="sub-section option-selection">
{{#if name}}<h4>{{name}}</h4>{{/if}}
<div class="current"></div><button class="button" id="{{id}}" data-action-id="{{id}}">Change...</button>
</div>
</script>
I've been searching this for a while now. But given that my forte is not web development, I'm not really sure what to search for...
You may be able to get the button element(s) by its class instead; for example:
var x = document.getElementsByClassName("button");
As you suggested, you can improve your selection's precision by first getting the 'optionSelectionTemplate' element(s) like so:
var x = document.getElementById("optionSelectionTemplate").getElementsByClassName("button");
Or if you prefer:
var x = document.getElementById("optionSelectionTemplate").getElementsByTagName("button");
Here are some links for more on these method:
https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp
Depending on how dynamic your localization should become, you could also specify the text inside a (locale-dependent) CSS as in https://jsfiddle.net/1gws5kat/ :
[HTML]
<button class="button btn_change" id="{{id}}" data-action-id="{{id}}"></button>
[CSS]
.btn_change:before { content: "Change..."; }
In particular when dealing with a large number of identically-named elements (i.e. many "Change" buttons), this might be pretty handy.
You find those btns by this command:
var btnlist= $(':button')
This Camano get you all button in your html file, then loop ton in and apply your changing.
Before call this command, jquery must be install.
I hope you can help. I am trying to set part of a column to a text area.
$('#myListview .list-item').click(function() {
getId('textarea-Status').value(this.innerHTML);
}
I printed out 'this' which shows all of my HTML however I only want to show a specific part:-
Within the HTML that I have printed out to a text area I want to be able to print the row ID called 'data-roid'.
<div class = "ui-btn-text listview-row" **data-rowid="123456789"**>
So basically my new text are value wuld = '123456789'
getId('textarea-sysID').value($(this).find('data-rowid').text()));
sysID = $(this.data-rowid);
alert(sysID.innerHTML);
getId('textarea-sysID').value(sysID);
getId('textarea-sysID').value = JSON.stringify(sysID);
Would really appreciate any help.
Thanks
Get element by has attribute selector and attribute value by using data() method.
$(this).find('[data-rowid]').data('rowid')
I have an html on a page like this:
<div id="headline" class="editable-item"><p class="title" dir="ltr">InfosysSolutions Pvt. Ltd.</p></div>
The value in paragraph tag changes every time. I want too fetch value inside this tag ie: in this case it is "InfosysSolutions Pvt. Ltd." using javascript.
I think you can get the contents of the p element with class title inside the #headline element
var title = document.querySelector('#headline .title').innerHTML
Demo: Fiddle
I have a setup, where input values get sent to replace the option text in a select list. that's working fine. thing is, i want that same text to also replace the text in a different place in the doc as well- the additional text i want to change is inside a label in a form plugin and i cant put an i.d in the label tag. so my questions is what vanilla javascript do i need to reach the text and replace it with the text from the first input?
the markup thats working ok:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
...many of these. targeting:
<select id="select1">
<option id="char_name1" value="1">1st</option> ...</select>
(equivalent number of options...)
with
<script>function change1(eet){
document.getElementById("char_" + eet.id).text =
document.getElementById(eet.id).value;}</script>
i would like to replace what in the follow markup:
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>
cant add an id to the lable, and the frm_primary_label class is used many times so i cant target the specific text through it (need to go through the div id). any help on the proper markup would be appreciated.
If there is only 1 element under the div, you can just use getElementsByTagName so you could possibly have a code snippet something like this:
var fieldContainer = document.getElementById("frm_field_53_container");
var label = fieldContainer.getElementsByTagName("label");
label[0].innerHTML = document.getElementById(eet.id).value;
I'm not entirely clear on what you want, but I think document.querySelector is what you're looking for:
document.querySelector("#frm_field_53_container label").text = 'new text';
Browser support:
http://caniuse.com/queryselector
My goal is to create a button that when pushed will execute javascript to insert html that creates a new div with content inside of it. I have been able to get the button to click and
preform a .toggleclass and I have tried to use .html , .insertAfter(input.html()); but I have not had any luck.
My HTML for button
<input id="slideshow" name="viewing" value="View Slideshow" type="button"
onClick="newOverlay();">
current javascript
function newOverlay(){
var newItem = $("<p>Add this text instead</p>");
$("input").insertAfter(this.html("<p> Is this going to work</p>"));
}
I know this is adding a < p > and not a div but I tried to make it similiar thinking if I could get it to insert this paragraph then I could work on inserting the div.
Thanks for looking at this.
If you want to insert a p tag after every input, then you should do
$("input").after("<p> Is this going to work</p>");
If you want to inser the p tag after the input that was clicked then you would do
$(this).after("<p> Is this going to work</p>");
Where do you want to append your new item?
You should do something like this I guess.
function newOverlay(){
var newItem = $("<p>").text("Add this text instead");
$("YOUR_SELECTOR_HERE").append(newItem);
}
Give a sample with jsFiddle.