I'm doing kinda learning by doing JavaScript right know, but I have a problem, where I can not find the solution on stackoverflow. I want to replace a String on a webpage, where I just have the class, but not the ID.
document.getElementsByClassName('ep_price')[0]="FOO"
This should change the defined elemet to FOO, but it does not do that and I have no idea why not...
I have read that I should use .value, but this var is not even defined...
See Screenshot of my Chrome console below:
You need to use .textContent property if you intended to change the text.
document.getElementsByClassName('ep_price')[0].textContent ="FOO"
Related
I am using one of those vulnerable practice sites on Kali Linux and when I inspected the source page I noticed the following variable var pathName = document.getElementById("path") The value of pathName is hidden and it is up to me to find it as these sites are there for people to practice their ethical hack skills
So in the Chrome Web Browser console, I type in document.getElementById("path").value but I keep getting return null. I don't understand why, like do I need to do like window.ontop?
Any help would be great!
Make you sure you have an input in DOM with id="path" attribute value.
For example -
<input id="path">
If that is not present in the DOM then getElementById will always return null.
You can open Chrome-Dev Tool and search this #path in Elements tab. That should highlight that input, if it is not then you are targeting wrong element.
If document.getElementById("path").value returns null, your element was found. It might not be an input element, so might not contain a value field.
Try typing JSON.stringify(document.getElementById("path")) into the console to inspect the object.
Also try document.getElementById("path").outerHTML to see the attributes and children.
Or just document.getElementById("path") and open the tree to view the internals.
I have this weird error, the title pretty much says it all. I'm trying to make a Javascript variable which has a Raphael.js text element as 'value'. Problem is the text is not showing. When I just do paper.text, without assigning the object to a variable the text does show. Has anyone encoutered this? I can't seem to find a solution. Thanks in advance.
var messageObject = paper.text(100,100,"test");
I know jsFiddle displays it's results in an iFrame. I am taking a JS class right now and according to my instructor, "getElementById" is the most used function in all of JS.
So why doesn't "getElementById" work in jsFiddle:
document.getElementById("myH1")
However...
document.getElementsByTagName("H1")
Does work!
See my fiddle for the example:
http://jsfiddle.net/uM9t4/
document.getElementById("myH1") does work.
I think what you are trying to do is change the attribute of class from having "bye" to having "NO", which doesn't work. You are getting the class and changing it properly, but it is just a string. You have to then reassign it back to the class attribute.
document.getElementById("myH1").setAttribute('class', document.getElementById("myH1").getAttribute("class").replace("bye","NO"));
Or, stashing the element in a variable:
var myH1 = document.getElementById("myH1");
myH1.setAttribute('class', myH1.getAttribute('class').replace('bye', 'NO'));
it does, its just your thinking of how replace works is wrong, it does not do an inline change it returns the changed string, if it didnt work you would be getting an
Cannot call method 'getAttribute' of null
document.getElementById("myH1").getAttribute("class").replace("bye","NO");
should be
var change = document.getElementById("myH1").getAttribute("class").replace("bye","NO");
document.getElementById("myH1").setAttribute("class",change);
JSFiddle
I am having trouble getting the contents of a textarea with js. I feel like I've done this many times before without problems but something is throwing it off or I have a mental block.
html
<textarea id="productdescript">test copy..asdfd</textarea><button value="Enter" onclick="addProduct()">
js
function addProduct() {
var descript = document.getElementById('productdescript').textContent;
alert(descript);
}
Firefox is the only browser I have currently.
When I use textContent, the alert box appears but it is blank.
When I use value, the alert box appears and says "Undefined"
When I use innerHTML, all the HTML appears including the tags.
Also, I understand that textContent only runs in FF and for cross browser compatibility you need to do something like innerText and textContent but textContent is not working in FF. There is no jquery on this app
What is the correct cross browser way to get contents of textarea! Thanks for any suggestions.
For textarea, you could only use .value in your scenario (I tested your given code and it works fine).
.
Also,
1) keep in mind that you call this function addProduct() ONLY after your element is mentioned in the code, otherwise it will be undefined.
2) there must not be another element with id as productdescript
3) there must not be a JS variable called productdescript
This are your code?
you write document.getElementByID.... and the "D" should be written lowercase "d"
document.getElementById('productdescript').textContent;
I'm trying to change the value of a text input field based on user actions. I'm doing it like this:
document.getElementById(textFieldID).value = newValue;
It isn't quite working -- the original text in the field remains on the screen, unchanged. However, when I submit the form, it behaves as though the value was indeed changed correctly. (And a debug alert confirms that yup, I'm hitting that bit of the code and passing in the right field ID and text value.) Anybody have any insights? Is there something I need to be doing to redraw the input element?
Edit: Per Jeff B's request, and per the fact that this seems to have everybody stumped, here's some relevant bits of code:
<script LANGUAGE="JavaScript" TYPE="text/javascript">
function changeText(changeSelector)
{
var myindex = document.getElementById(changeSelector+"Recent").selectedIndex;
var SelValue = document.getElementById(changeSelector+"Recent").options[myindex].value;
document.getElementById(changeSelector).value = SelValue;
document.getElementById("historicalText").value = SelValue;
document.getElementById("historicalTextSelect").value = changeSelector;
}
</script>
<input onChange="updateScrollingPreview1217(this); return true;" type="text" id="crawlMsg1217" name="crawlMsg1217" size="60" maxlength="1000" value="">
<select id="crawlMsg1217Recent" name="crawlMsg1217Recent" onchange="javascript:changeText('crawlMsg1217');">
[options go here]
</select>
And that "onChange" handler isn't what's gumming up the works; I get the same behavior with or without it.
Edit 2: It looks like the problem is being caused by "JSpell", a third-party spelling checker our product uses. (I'm told that clients prefer using it to a spellcheck built into the browser; go figure.) It appears to be slightly misconfigured on my test machine, so I'm going to try straightening that out and praying that it makes the problems go away. If it doesn't ... should be interesting.
Edit 3: Yup. Fscking JSpell. Just posted a complete answer for the sake of posterity, will accept it tomorrow when I'm allowed. My thanks to everybody who tried to help; +1's all around, wish I could give more.
I have confirmed that the culprit is indeed JSpell, and that the precise trouble spot is this line:
window.onload=jspellInit;
Despite the prayers mentioned in Edit 2 above, making sure it was configured correctly did NOT make the problem go away. And this line is indispensable to JSpell's functionality. I don't know if JSpell always hoses Javascript functionality this way, or if there's some sort of perfect storm of factors that's causing it to pick a fight with my page, but that is indeed the source of my problems.
My thanks to everybody who tried to help. This was obviously a bit of a no-win in terms of getting the right answer, since it was caused by a component that was seemingly entirely unrelated and thus didn't get mentioned by me, but you at least confirmed that I was (in theory) doing things right and not simply going insane.
Is the document's id actually "textFieldID" or is "textFieldID" a javascript variable that contains the ID of the text input to change? If it is not a variable, I believe you should make it:
document.getElementById('textFieldID').value=newValue;
It's hard to debug this without the context, since the code you have ought to work fine. Can you confirm that you've got the right node by doing something like:
document.getElementById(textFieldID).style.border = "4px solid red";
What does any other element on the page have a name attribute that is the same as the id?
Internet Explorer 8 and later. In IE8
mode, getElementById performs a
case-sensitive match on the ID
attribute only. In IE7 mode and
previous modes, this method performs a
case-insensitive match on both the ID
and NAME attributes, which might
produce unexpected results. -
http://msdn.microsoft.com/en-us/library/ms536437%28VS.85%29.aspx
Try alerting your the nodeName and id ofr the returned element and make sure its the input you expect.
Use div element instead of textfield. I had same problem, my textfield which is changed with another script wasnt get the right value. you can easily use any div element like textfield with some CSS. than you can get the value from div using innerHTML.