I've searched other similar questions/answers but no one seems to work for me.
I've tried every single combination (text, innerHTML, jQuery, html) to make it work without success.
Javascript:
if (store.indexOf(nome) > -1) {
if (righe+incrementi < 30) {
posizionamento = store.indexOf(nome);
var incrementa = parseInt(document.getElementById('quantity'+posizionamento).innerHTML);
incrementa ++;
document.getElementById('quantity'+posizionamento).innerHTML = incrementa;
incrementi = incrementi+1;
var settam = document.getElementById('count').innerHTML;
var tipo = document.getElementById(posizionamento).getAttribute('data-tipo');
if (tipo === "water"){
settam++;
document.getElementById('count').innerHTML = settam;
alert(settam); }}}
HTML code:
<div id="conteggio">
<div class="titoli">Elements:</div>
<span style="display: none" id="counttxt">
<span class="conteggio">Count</span>
<span class="count" id="count"></span>
</span>
</div>
I'm getting mad with that, the alert work correctly (shows the right int) but the innerHTML does not change nothing, meanwhile the other works correctly (incrementa ++; [...].innerHTML = incrementa;)
Tested in chrome and safari.
In firefox it change, but after I close the alert it set back the "value" to the previous "value".
What I'm doing wrong?
Remove style="display: none" from
<span style="display: none" id="counttxt">
Try
<span id="counttxt">
<span class="conteggio">Count</span>
<span class="count" id="count"></span>
</span>
Related
I have the following field inside my SharePoint office 365 page:-
here is the related markup:-
<div class="ms-rtestate-write ms-rteflags-0 ms-rtestate-field" id="ProjectClosureSummary_cdd30532-e128-4dcd-b9bd-baf3e12a4c04_$TextField_inplacerte"
role="textbox" aria-haspopup="true"
aria-labelledby="ProjectClosureSummary_cdd30532-e128-4dcd-b9bd-baf3e12a4c04_$TextField_inplacerte_label" style="min-height:84px" contenteditable="true"
aria-autocomplete="both" aria-multiline="true" rtedirty="true">
<p>
need to ge this text!!
<span id="ms-rterangecursor-start" rtenodeid="1">
</span>
<span id="ms-rterangecursor-end"></span><br>
</p>
</div>
now using javascript or jQuery i need to check if the field contain data? but i am not sure how i can get the text which is inside a <p> inside a <div>?
Maybe you could try something like this:
text = $('p').text();
Please take reference from below code:
var parentdiv = document.getElementById('parent');
var childNode = parentdiv.hasChildNodes() ? parentdiv.children[0] : ''
console.log(childNode.textContent || childNode.innerText);
<div id="parent"><p>hello world</p></div>
I've just about tried this every possible way, I'm super new at this.
I'm trying to get the element using class name, and then I'm trying to change it's value to true so that I can run a function I made that uses .push and an if/else statement to build a new array based off of the values in the spans (I'll post that function at the bottom)
Any help anyone can provide would be awesome, I've been at this for the last 3 evenings and I'm just stuck and I have to have this solved by tomorrow.. :(
A billion thanks in advance!
JavaScript
// Function Declaration to check the user's character choice.
function userChoiceCheck(uChoice, low) {
for (var j = 0; j < low.length; j++) {
if (uChoice == low[j]) {
var element = document.getElementsByClassName(low[j]);
element.setAttribute = "true";
console.log(element);
console.log("The value of " + low[j] + " should now be true!");
} else {
document.getElementsByClassName(low[j].class).value = "false";
console.log("The value of " + low[j] + " should now be false!");
}
}
}
HTML
<div class="text-center pt-5">
<h1 id="wordGuessArea">
<span class="m" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="s" value="false">__ </span>
<span class="e" value="false">__ </span>
</h1>
</div>
function mentioned above:
// Function Declaration to merge censoredWord Array and upper Array into a
new array called displayArr. Depending on the boolean value of the span that
contains the character.
function mergeArr(low, up, wSplit, cWord) {
for (var m = 0; m < wSplit.length; m++) {
var targetCharSpan = document.getElementsByClassName(low[m]);
var charSpanVal = targetCharSpan.value;
if (charSpanVal == true) {
displayArr.push(up[m]);
} else if (charSpanVal == false) {
displayArr.push(cWord[m]);
}
}
}
I assume that you are having trouble on get all element by class,
if so, you need a loop
getElementsByClassName return a array HTMCollection, instead of using element.setAttribute, you should loop through every element inside your element variable
Like this:
for(let i=0;i<element.length;i++)
{
element[i].setAttribute = "true";
}
You can solve your problem this way using jQuery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="text-center pt-5">
<h1 id="wordGuessArea">
<span class="m" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="s" value="false">__ </span>
<span class="e" value="false">__ </span>
</h1>
</div>
<script>
for(var i=0;i<$('#wordGuessArea span').length;i++){
//Applying for all span elements inside wordGuessArea id
$('#wordGuessArea span').html('Bla');
}
</script>
</body>
I am using angular js with multiple conditions all using the same id. Need to get text just from the condition that is true.
I just found a big bug in an app I'm about to release.
I am using angularjs/ionic vs 1 and use allot of conditions in my html.
These condition produce great results and show what I want to be shown.
However whenever I save the information it fetches the element id, which each condition has the same id, and instead of giving me the text to the visible condition, I get all of them.
I need a way to grab the id text only if it's visible. This used to work, unless this was missed during testing.
Checking the id in controller.
function JqliteIds(id) {
// var myElement = angular.element( document.querySelector( '#some-id' ) );
var p = angular.element(document.getElementById(id)).text().trim();
p = p.replace(/(\r\n|\n|\r)/gm, " ");
p = p.replace(/ +/g, ' ');
return p;
//stepTwoFormula = stepTwoFormula.replace(/(\r\n|\n|\r)/gm, " ");
//stepTwoFormula = stepTwoFormula.replace(/ +/g, ' ');
}
The html form with multiple conditions. The id is... id="stepOneFormula"
<div class="item item-text-wrap">
<div ng-if="level.light">
<div ng-show="level.stepOne.bleachAdditiveType < 0">
<p id="stepOneFormula">
Mix {{config.productTypes[level.stepOne.productType]}} with
<span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2">
the manufacturer suggested developer or
</span> {{level.stepOne.peroxideVolume}} volume / {{level.stepOne.peroxidePercentage}} percent peroxide until it is the consistency of mayonnaise.
</p>
</div>
<div ng-show="level.stepOne.bleachAdditiveType > -1">
<p id="stepOneFormula">
Add approximately {{config.partsInches[level.stepOne.bleachInches]}} of
{{config.productTypes[level.stepOne.bleachAdditiveType]}} to {{config.productTypes[level.stepOne.productType]}}. Mix with
<span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2">
the manufacturer suggested developer or
</span> {{level.stepOne.peroxideVolume}} volume / {{level.stepOne.peroxidePercentage}} percent peroxide until it is the consistency of mayonnaise.
</p>
</div>
</div>
<div ng-if="!level.light">
<p>
<!--Going Red-->
<div ng-show="level.stepOne.redRootsTonePercentOne > -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/red-rootsDbl1.html'"></div>
</div>
<!--Mixed Levels of gray-->
<div ng-show="level.stepOne.grayTonePercentFour > -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/gray-mixedDbl1.html'" data="level.stepOne"></div>
</div>
<!--Regular Levels-->
<div ng-show="level.stepOne.grayTonePercentFour === -1 && level.stepOne.redRootsTonePercentOne === -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/genericDbl1.html'"></div>
</div>
</p>
</div>
</div>
As soon as I posted this question I started reading on the ng-show, ng-if and changed my ng-shows to ng-if... it worked.
https://docs.angularjs.org/api/ng/directive/ngIf
Don't need to check if element is visible. Unlike ng-show, the ngIf directive removes or recreates the element. So if it isn't created it's not there so the id is irrelevant.
I want to get the id/class/both of the anchor tag, regardless of where it falls in the tag hierarchy. Example below is strange but realistic for my purposes because our website is accessed through a CMS that I have no control over. If people add multiple levels of formatting at different times, the CMS likes to add new span's...
So, having the live with the above facts, I want to pin down specific anchor tags by their id/class/both, but I don't always know where they will be located in the tag drill-down.
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>
I have started off like such,
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var telm = event.target.parentNode.className;
var delm = 'anchor_id_A';
console.log(telm);
if (telm == delm) {
dataLayer.push({
'youClicked': telm
});
console.log(dataLayer);
};
});
*WHERE: telm = target element; delm = desired element.
To clarify. I am specifying anchor for a reason, it is not simply for the example. As I am restricted by our CMS, I can't go in and add markup to pre-defined code (i.e. template), but I do need to know what link was clicked as exactly as possible (for Google Analytics), so that I can track down what users are ignoring, not seeing, or prefering.
You can navigate up the hierarchy until you reach the anchor element, then just read its ID.
See here:
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var el = event.target;
while (el.parentElement && el.tagName != 'A') {
el = el.parentElement;
}
dataLayer.push({
'youClicked': el
});
console.log(dataLayer);
alert(el.id);
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>Click Me</p>
</span>
</span>
</span>
</a>
</div>
</div>
What you're trying to achieve, is probably something like this :
var dataLayer = [];
document.addEventListener('click', function(event) {
var needle = 'anchor_class_A'; // The class of the element you're looking for
var closest = event.target.closest("." + needle);
if(closest && closest.id) {
dataLayer.push({
'youClicked': closest.id
});
alert(JSON.stringify(dataLayer, null, '\t'));
}
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
<div class="div_class_A">
<a href="#" id="anchor_id_X" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_Y">
<span id="span_id_Z" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>
I'm creating a store locator for a website and ive got a tooltip box that displays an email the i want to make a link. this is the html:
<div class="gm_popup">
<span class="address"> Address</span><br>
<span class="city"> City</span><br>
<span class="phone"> 123 456</span><br>
<span class="email"> email#example.com</span><br>
</div>
and this is the js:
jQuery(document).ready(function(){
var old_focus_and_popup = focus_and_popup;
focus_and_popup = function (id){
return_val = old_focus_and_popup (id);
setTimeout(function (){
jQuery("#store_map .gm_popup .email").click(function(){
var text = jQuery(this).text();
document.location = "mailto:" + text.trim();
});
jQuery(".gm_popup .email").css('text-decoration','underline').css('color','#2aa8e0');
}, 200);
return return_val ;
}
});
any idea why this wouldnt be working? after adding some console.logs it seems like its getting as far as the .click but no going inside the function. Thanks
You are registering click event
This won't trigger until any click is done manually.
If you wanna get auto click then try like this after registering click event
jQuery("#store_map .gm_popup .email").click();
or
jQuery("#store_map .gm_popup .email").trigger("click");
Well you have all the events code inside the function, and you never end up calling that function. So I've made some changes, removed the setTimeout, as that was unnecessary. Also, made a call to that function.
<div id="store_map">
<div class="gm_popup">
<span class="address"> Address</span><br>
<span class="city"> City</span><br>
<span class="phone"> 123 456</span><br>
<span class="email"> email#example.com</span><br>
</div>
</div>
jQuery(document).ready(function(){
focus_and_popup = function (id){
//return_val = old_focus_and_popup (id);
jQuery("#store_map .gm_popup .email").click(function(){
var text = jQuery(this).text();
console.log("HERE");
document.location = "mailto:" + text.trim();
});
jQuery(".gm_popup .email").css('text-decoration','underline').css('color','#2aa8e0');
return return_val ;
}
focus_and_popup();
var old_focus_and_popup = focus_and_popup;
});
I wrote for you a snippet that simply works.
jQuery(document).ready(function () {
jQuery(".gm_popup .email").click(function () {
alert('hello');
var text = jQuery(this).text();
document.location = "mailto:" + text.trim();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gm_popup">
<span class="address"> Address</span>
<br>
<span class="city"> City</span>
<br>
<span class="phone"> 123 456</span>
<br>
<span class="email"> email#example.com</span>
<br>
</div>