i have two spans on my page with class='hidden' and then some javascript to remove the class when a condition is met, its working fine in ie 9/10 and firefox but its not working in chrome when I run the function in the chrome JS console I get the message TypeError: Cannot read property 'attributes' of null
Anybody know whats going on?
<script type='text/javascript' >
function showhidden() {
var att =document.getElementById('hiddentextbox');
att.attributes[0].value='';
att =document.getElementById('hiddentextbox1');
att.attributes[0].value='';
}</script>
Thanks
Try changing the class by using att.className = '' instead of what you're doing, which I have never seen before.
You might also want to check out jQuery, which has good built-in .show() and .hide() functions.
It can't find document.getElementById('hiddentextbox'); therefore it can't find attributes of null, because non-found element is null. I believe that is the problem.
Related
I am currently following an online class and I can't understand why I don't have the same thing as the teach in my console.
I have an h1 in my HTML, followed by this :
<script type="text/javascript">
console.log(document.querySelector('h1'));
</script>
I am supposed to get the content of the h1 in my console but it returns me the selector title. I have not found something that could help me in #.. (and just to be sure I tried it on several browsers).
EDIT :
I am supposed to get this:
And i get this:
FINAL EDIT :
Thank you everyone, I believe this is only a matter of browser (didn't work on Chrome and Firefox but ok on Edge).
you just need to add the .innerHTML at the end.
<script type="text/javascript">
console.log(document.querySelector('h1').innerHTML);
</script>
I was trying to print a anual report but i need to change 2 texts around the page, one of them has only a class attribute. Im new at js so i made this.
<div id="formBusqPresElec:dtResBSPE_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header">
<span class="ui-paginator-current">Mostrando 1-20 de 1626 registros</span>
</div>
And the other has an id.
<div id="fBusqSPE">Mostrando 20 de 1626 registros</div>
I made it work on Chrome
function imprimir() {
var oldText = document.getElementById('fBusqSPE').innerText;
document.getElementById('fBusqSPE').innerText = document.getElementsByClassName('ui-paginator-current')[0].innerText;
window.print();
document.getElementById('fBusqSPE').innerText = oldText;
}
But in firefox throws
[10:48:48.330] TypeError: document.getElementsByClassName(...)[0] is
undefined
Edit: So let me explain more.
Actually im working inside 2 iframes, which the first one is for the menu, and the other one is for more options. Then the central iframe is used to show the actual report.
Maybe I must define which iframe I want to retrieve those elements.
There are 2 problems here. The first causes your error of document.getElementsByClassName(...)[0] is undefined and once overcome, the second is that Firefox does not support innerText
The only way to generate the specified error in Firefox is for no elements with the specified class being present on the page. This is demonstrated by the following code
<div class="a-test"></div>
// on page load
document.getElementsByClassName("b-test")[0].innerHTML="Test";
JSFiddle:http://jsfiddle.net/UL2Xs/
If you watch the console when running the above fiddle, you'll see the same error as you get.
Is it possible that your javascript is running before the page has finished loading?
The second, and more minor issue is that FireFox does not support innerText. You should use .textContent or possibly .innerHTML.
You probably should use:
iframe.contentDocument.getElementsByClassName(...)
(see: contentDocument for an iframe)
Basically .innerText will not work in FF. FF uses textContent property.
var text = element.textContent;
element.textContent = "this is some sample text";
I saw a few posts similar to my problem and tried the solutions offered, but I'm still having issues with IE8 & IE9 and 'selectedIndex'. This code returns my variable answerSubmitted as 'undefined':
var answerSubmitted = document.getElementById("DropDown-Answers").selectedIndex;
The above works perfectly in all other browsers. Based on another post here, I also tried this:
var answerSubmitted = document.getElementById("DropDown-Answers").value;
Still the same results - works elsewhere, but not in IE8 or IE9. I've verified that IE is recognizing that particular element by its ID.
Any guidance here?
MORE INFO:
I'm creating the drop down menu dynamically by going thru a loop and adding variable text between the option and /option tags, like so (note that 'tempRandom' is a random number updated each time thru the loop):
tempMenuText = tempMenuText + "<option>" + Answers[tempRandom] + "</option>";
The results are surrounded by the form an select tags, then I update the innerHTML of my element. This works and generates a working drop down menu. But... perhaps this is a clue: when I put a test with the innerHTML of the menu element into another element to view it, it shows as empty. It's as though IE is not seeing that there is HTML in the element, thinks it is null, and therefore 'selectedIndex' fails as null.
This is solved. It turns out it was my error in how I was referring to the ID of the selected item. An associate explained that .selectedIndex only works (in IE, at least), when the ID within the 'select' tag is correct. If not, it returns null, which is what was originally happening. All is good now. Thanks for the suggestions.
I have some Javascript that finds all of the hyperlinks in a page that contain 'google' for example and changes the beginning of the url to another url.
I am trying to add a class to this affected link, however I am getting a lot of 'undefined' errors in the JS console. I have tried alert($(this).innerHTML)) which showed the contents of the hyperlink - clases and whatnot. But for some reason I cannot append a class. I have also tried using this.className += " socks". That also causes an undefined error. I think I am missing something simple!
Also is there a way of using a regex in the search, I am newish to Javascript.
Here is my code:
$("a[href*='google']").each(function(){
this.href = this.href.replace('http://www.google.co.uk','http://www.ask.com');
this.href = this.href.replace('http://www.google.com','http://www.ask.com');
$(this).addClass("socks");
});
Thanks very much for any help!
There is no error with this code that i can see:
http://jsfiddle.net/p7Sgj/
See this.
try
$("a[href*='google']").each(function(){
var href = $(this).attr('href');
href.replace('http://www.google.co.uk','http://www.ask.com');
href.replace('http://www.google.com','http://www.ask.com');
$(this).attr('href', href);
$(this).addClass("socks");
});
instead of using this.href. I guess your code doesn't reach the addClass part...
Also, use firebug (in case of firefox) or chrome developer tools (in case of chrome) for debugging. You can simply set a breakpoint, add watches, etc...
(In that case, make sure you use a so-called non-minified version of jQuery for easier debugging)
If your HTML code is
Hello
World
And your CSS is
.socks {
color:#f00;
}
Then your code should be working fine.
http://jsfiddle.net/k93TZ/2/
Working here.
It might be your html or css code.
Please excuse my ignorance I am not very familiar with JavaScript and have been tasked with repairing a bug by a developer no longer at the company.
The onclick works perfectly in FireFox, however in IE 7&8 (the only ones we test for), it appears to run through the onclick functions properly, then instead of the data being submitted to the form URL in goStep3(), it runs through every onclick on the page, with href="#" then finally submits with incorrect information as the variable has been overwritten 50 times.
view
EDIT:
When I run trackSponsor(62, 64265); goStep3(1896, 64265, 0); return false; in the Developer Tools in IE8 I get an error of returning false outside of a function....removing that it works just fine.
Is the line that I believe is causing the problems?
trackSponsor() is working properly and returns false
goStep3() is quite a large function however it works by retrieving values from 4 other functions within, assigning the values to a URL within theAction
It completes the function by EDIT:
var yr = $("#find-yr").attr('value');
var me = $("#find-me").attr('value');
var mo = $("#find-mo").attr('value');
var keywords = $("#find-keywords").attr('value');
var theAction = PATH_BASE+'find/step3/'+p_term+'/'+p_id+'/'+p_l_id+'/';
document.forms['FindForm'].action = theAction;
document.FindForm.submit();
return true;
I have tried returning false from this function, as well as changing the document.FindForm.submit() to the 'correct' syntax of document.forms['FindForm'].submit() and it still does not submit until running through all of the other onclick s on the page.
Thanks in advance!
Notes:
jQuery is being used as well.
Javascript is not throwing any errors.
This works fine in FireFox
I can see it going through all of the other functions in the other onclicks using Developer Tools and stepping through the page it does not submit the results of goStep3 until it has gone through all of the other onclick functions on the page.
"posting my earlier comment as an answer"
I see a lot of jQuery being used with attribute selectors, so plz check the code against those.
EDIT:
I noticed ur unfamiliar with JavaScript... so in-case u didnt know, a jQuery selector, will select all tags matching a certain "selector-filter" and perform a certain action on them... so if there is a selector that selects all A tags with a href attribute (or maybe another common attribute between them...) then that would be the cause of your problem.
EDIT: -after you posted your answer -
glad you found an answer...
though it is alittle werid,
cause according to your question it goes through "every element with href="#" ...
However According to msdn, Event bubbling simply passes these unhandled events to the parent element for handling. not through "similar" tags :)
oh well..nothing is logical when it comes to IE
I would start by removing "return false;" from the onClick event since it really isn't doing anything.
try changing
href="#"
with
href='javascript:void(0)' .
I can't say for sure where things are going wrong, but I discourage using a form's name attribute to reference it like you have done here:
document.forms['FindForm'].action = theAction;
document.FindForm.submit();
Why not try the following jQuery:
$("form:FindForm").action = theAction;
$("form:FindForm").trigger("submit");
You should also check that $("form:FindForm") is indeed referencing the desired form element.
The problem was called because of how IE uses the bubble! Thanks all for your help, I have included the code solution to be placed in goStep3().
var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
window.event.cancelBubble = true;
}