Develop Reference

Why does .innerHTML edit the src attributes? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm making a chrome extension and trying to replace a certain word with another.
let allElements = document.querySelectorAll('*');
allElements.forEach(function (element) {
element.innerHTML = element.innerHTML.split(word).join("████");
}
The above code edits src and srcset attributes as well.
element.innerText and element.Textcontent removes all the CSS from the webpage.

Unfortunaly inner/outerHTML are changing all child elements too what causes them to be re-rendered by the browser (even if not changed). this also means you may "replace" some text multiple times if your selector received elements from all levels and the replacement text contains the original text too.
So the proper way is to change just the text-elements without touching the child-elements. This way you will not experience any of the mentioned problems:
let word = "yourword"
let allElements = document.querySelectorAll('*');
allElements.forEach(function (element) {
element.childNodes.forEach(function(el){
if (!el.nodeValue) return;
el.nodeValue = el.nodeValue.split(word).join("████");
});
});

Change inner html not working [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I am having a problem trying to change some innerHtml with this piece of code bellow:
var element = document.getElementByClass("productitemcell > a");
element.innerHTML = "Remover";
It is suposed to change the innerHTML from a link that says"Remove" to "Remover" and its not working.
Here's the page of it: http://ooleiro.businesscatalyst.com/OrderRetrievev2.aspx
You have to buy some products to access this shopping cart page.

I think you meant document.getElementsByClassName()
This method will return a HTMLCollection object. You can grab the first element like so:
var elements = document.getElementsByClassName('class');
var firstElement = elements[0];
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

The method is called getElementsByClassName (plural) and returns a collection of HTML elements. For which one of those do you want to change the HTML? For the first one?
Additionally, you cannot use a CSS selector like that in standard DOM methods
EDIT: Obviously you want to change all occurrences of a elements inside all occurrences of .productitemcell:
var pics = document.getElementsByClassName("productitemcell");
for(i=0; i<pics.length; i++) {
// loop over all elements with that class
var anchors = pics[i].getElementsByTagName("a");
for(j=0; j<anchors.length; j++) {
// loop over all anchor elements within the current class element
anchors[j].innerHTML = 'Remover';
}
}

Had to change the class to
var removerprod = document.getElementsByClassName("remover");
for(i=0; i<removerprod.length; i++) {
// loop over all elements with that class
var anchors = removerprod[i].getElementsByTagName("a");
for(j=0; j<anchors.length; j++) {
// loop over all anchor elements within the current class element
anchors[j].innerHTML = 'Remover';
}
}
so it doesnt change the product name as well. the only problem remaining is that it is retrieving with ajax and everytime it refreshes it changes again to "Remove"Thank's you devnul69, i realy learned a lot today about js.

Get the value of a div [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Helllo, I'm having a div like this:
<div>1+1</div>
How can I get these '1+1' to the javascript and calculate them to '2'?
Thanks in advance!

you can use innerHTML property of element by javascript to extract the value:
document.getElementById("div").innerHTML
and then use eval() method to evaluate the math expression:
var exp=document.getElementById("div").innerHTML;
alert(eval(exp));

You need to somehow identify this div, e.g
<div id="div-with-expression">1+1</div>
And code will be like:
console.log(eval(document.getElementById('div-with-expression').innerText));

You can use eval:
var equation = getElementById(IdOfDiv).innerHTML;
var result = eval(equation);

Well, You could use the Javascript eval() func:
http://www.w3schools.com/jsref/jsref_eval.asp
But, eval functions can introduce malicious code into your environment.
I'm not sure as to what your purpose to start with and what your assumptions are for that input but here's another way to go about it with regex although it's more complicated:
var myRegexp = /(\d+)(\+)(\d+)/;
var match = myRegexp.exec("1+1");
// parseInt(match[0]) == 1 ,as an Int
// match[1] = '+', you could figure what operand this is with 'if else' conditions
// parseInt(match[2]) == 1 ,as an Int

Get text in getElementsByClassName [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am writing some javascript to be run in a bookmarklet that should get the text within a element that has a certain class name.
So for example
document.getElementsByClassName('price')
where the web page has or example
<span class="price">
£23
</span>
How would I go about getting the actual text within the the element that has a class name price (i.e £23 in the above example).

getElementsByClassName returns an array of elements. Traverse through that array and get the innerText property of each. For example:
var priceEls = document.getElementsByClassName("price");
for (var i = 0; i < priceEls.length; i++) {
var price = priceEls[i].innerText;
alert("Price: " + price);
}
Live demo: http://jsfiddle.net/YQsBW/

JavaScript: Options is Nullor not an object [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
Hi i have written a small javascript function and i m getting the Error as "Options is Null or not an object"
Here is my code:
function ValidateMarks(sender, args) {
var ddlCategory = document.getElementById('ctl00_rightContainer_ContentTable2_ddlCategory').value;
var ddlDisabilityClass = document.getElementById('ctl00_rightContainer_ContentTable2_ddlDisabilityClass').value;
var GraduationPercntage = document.getElementById('ctl00_rightContainer_ContentTable2_txtGraduationPercntage').value;
var objCVValidateMarks = document.getElementById("ctl00_rightContainer_cvValidateMarks");
if ((ddlCategory.options[ddlCategory.selectedIndex].text == "-- Select Category --" || ddlCategory.options[ddlCategory.selectedIndex].text == "UR") && (ddlDisabilityClass.options[ddlDisabilityClass.selectedIndex].text == "No")) {
if (parseFloat(GraduationPercntage) < parseFloat('49.50')) {
objCVValidateMarks.errormessage = 'You are required 49.50% marks in B.Pharmacy to fulfill the eligibility.';
args.IsValid = false;
}
}
else {
if (parseFloat(GraduationPercntage) < parseFloat('44.50')) {
objCVValidateMarks.errormessage = 'You are required 44.50% marks in B.Pharmacy to fulfill the eligibility.';
args.IsValid = false;
}
}
}
When i check the value for ddlcategory it gives me the selected value but ddlCategory.selectedIndex gives me the value as 'undefined' hence i m getting the above mentioned error.

Try changing ddlCategory from
var ddlCategory = document.getElementById('ctl00_rightContainer_ContentTable2_ddlCategory').value;
to
var ddlCategory = document.getElementById('ctl00_rightContainer_ContentTable2_ddlCategory');
Now try getting the value using ddlCategory.value and selected Index using ddlCategory.selectedIndex

A couple of things:
It appears you have hardcoded in clientIDs for components.
Is this the case? If so please consider using either this:
http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx , which will allow you (in .NET 4.5, using ClientIDMode="Static") to have sensible never changing clientIDs (but also lets you run the risk of having more than one item with the same ID on the page).
or this:
document.getElementById("<%= MYELEMENT.ClientID %>").
OR if using seperate javascript files then pass in the clientIDs as parameters into your javascript function.
More specifically for your problem it seems that javascript cannot find ddlCategory or ddlDisabilityClass, I would imagine one of these two lines is failing and giving you a null var:
var ddlCategory = document.getElementById('ctl00_rightContainer_ContentTable2_ddlCategory').value;
var ddlDisabilityClass = document.getElementById('ctl00_rightContainer_ContentTable2_ddlDisabilityClass').value;
It is always good to debug javascript with Alerts when this happens, such as Alert('Object was:'+ddlCategory); This will give you a NULL if it's not found, or tell you specifically what that var is set to.
Looking at this again, your specific problem is that you are getting the values of these objects instead of a reference to the objects themselves. Removing .value from the end of your getElementById calls should fix this (as long as your references are valid).