So i have a simple code that tells that if there is a paragraph and user clicks on it, It should show text field and button. When you enter information in textfield and go the value in text field should be changed with textfield value. My code works fine but it gives error Cannot read property 'nodeName' of null at HTMLDocument.catchIt. Can anyone please tell how to solve it?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>jobgo</p>
<script type="text/javascript">
var editing = false;
if (document.getElementById && document.createElement) {
var butt = document.createElement('BUTTON');
var buttext = document.createTextNode('Ready!');
butt.appendChild(buttext);
butt.onclick = saveEdit;
}
function catchIt(e) {
if (editing) return;
if (!document.getElementById || !document.createElement) return;
if (!e) var obj = window.event.srcElement;
else var obj = e.target;
while (obj.nodeType != 1) {
obj = obj.parentNode;
}
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
while (obj.nodeName != 'P' && obj.nodeName != 'HTML') {
obj = obj.parentNode;
}
if (obj.nodeName == 'HTML') return;
var x = obj.innerHTML;
var y = document.createElement('TEXTAREA');
var z = obj.parentNode;
z.insertBefore(y,obj);
z.insertBefore(butt,obj);
z.removeChild(obj);
y.value = x;
y.focus();
editing = true;
}
function saveEdit() {
var area = document.getElementsByTagName('TEXTAREA')[0];
var y = document.createElement('P');
var z = area.parentNode;
y.innerHTML = area.value;
z.insertBefore(y,area);
z.removeChild(area);
z.removeChild(document.getElementsByTagName('button')[0]);
editing = false;
}
document.onclick = catchIt;</script>
</body>
</html>
You have onclick event attached on the whole document and are handling everything inside that function. Now you are correctly returning when it is a TextArea or an anchor tag but are forgetting to do so for the BUTTON tag.
Since you have one more onclick handler attached for your button called saveClick() which is doing the actual job you want, your code is working as expected. You only need to return from the other onclick event handler (catchit) when you have a button. Edit like this, it will work :
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A' || obj.tagName == 'BUTTON') return;
Related
I have problem with this code
I will create a JS addon to resize textarea when textfield is empty,
i think this code is good but not work for me :(
reason = document.getElementById('reason').value !== "";
causes = document.getElementById('causes').value !== "";
corrections = document.getElementById('corrections').value !== "";
comment = document.getElementById('comment').value !== "";
var disabled = $('form-control').is(':disabled') == true;
if (disabled && reason){
$("#reason").attr("rows","5");
}
var disabled = $('form-control').is(':disabled') == true;
if (disabled && causes){
$("#causes").attr("rows","5");
}
var disabled = $('form-control').is(':disabled') == true;
if (disabled && corrections){
$("#reason").attr("rows","5");
}
var disabled = $('form-control').is(':disabled') == true;
if (disabled && comment){
$("#reason").attr("rows","5");
}
You need to not repeat yourself (DRY)
let anyFilled = $("#reason,#causes,#corrections,#comment").filter(function() {
return this.value != "";
}).length>0;
if ($('form-control').is(':disabled') && anyFilled) {
$("#reason").attr("rows", "5");
}
Why are you redeclaring disabled so many times? especially since its the same expression each time? Just declare it once and make sure you brush up on DRY programming
var reason = $('#reason').val() !== "";
var causes = $('#causes').val() !== "";
var corrections = $('#corrections').val() !== "";
var comment = $('#comment').val() !== "";
var disabled = $('form-control').is(':disabled') == true;
if (disabled) {
if (causes || corrections || comment) {
$("#reason").attr("rows", "5");
}
}
I want to change the color of the button when it is clicked using this code
$('.vote').click(function(){
var self = $(this);
var type = $(this).data("type");
var action = $(this).data("action");
var parent = self.parent();
if(!(status == '1')){
if(type == '1'){
self.css("color","orange");
}
else if(type == '2'){
self.css("color":"red"});
}
}
});
And it is not working. But when I try to put this line self.css("color","orange"); outside the IF statement it is working :
$('.vote').click(function(){
var self = $(this);
var type = $(this).data("type");
var action = $(this).data("action");
var parent = self.parent();
self.css("color","orange");
if(!(status == '1')){
if(type == '1'){
//if statement here
}
else if(type == '2'){
//if statement here
}
}
});
The problem is that it is not what I want to happen. How can I make it happen using the first code above.
The problem appear to be in the following line :
self.css("color":"red"});
You've missed to open bracket { here :
self.css({"color":"red"});
_________^
Or just use comma , as you do in first example :
self.css("color","red");
Hope this helps.
var status = '2';
$('.vote').click(function(){
var self = $(this);
var type = $(this).data("type");
var action = $(this).data("action");
var parent = self.parent();
if(!(status == '1')){
if(type == '1'){
self.css("color","orange");
}
else if(type == '2'){
self.css({"color":"red"});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='vote' data-type='1'>Vote type 1</button>
<button class='vote' data-type='2'>Vote type 2</button>
I am getting the error below when I click the button that calls the JavaScript to do the validation. The strange thing is that everything was working before but I am not what happened now. If I select to ignore this error:
Error: '0.type' is null or not an object
then the code works fine but I get the error first then it asks me if i want to debug it, if i select No then the code works fine. Please help. thanks
it seems the code stops at this line:
if (areas[0].type == "textarea") {
but here is my entire code:
<script type ="text/javascript">
function Validate_1() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var selects = gridView.rows[i].getElementsByTagName('select');
//var inputs = gridView.rows[i].getElementsByTagName('input');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (selects != null && areas != null) {
if (areas[0].type == "textarea") {
var txtval = areas[0].value;
var selectval = selects[0].value;
if (selectval == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true;
document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'visible';
}
}
}
}
if (!flag) {
alert('Please note that comments are required if you select "No" from the dropdown box. Thanks');
document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'hidden';
// areas[i].focus();
// areas.[i].style.backgroundColor = "red";
}
return flag;
}
// document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'visible';
</script>
var areas = gridView.rows[i].getElementsByTagName('textarea');
getElementsByTagNane does not return null, the length would be zero
So your if check needs to change.
if (selects != null && areas != null)
should be
if (selects.length && areas.length)
I am working on a project where i want to change the value of the desired text boxes in the web page.
I am using javascript injection to the web browser to paste the values of the text fields.
In the code below, I have taken a activeElement in the document and compare it with other element in the element List. and want to paste another string in the next text field. But in the below code the if----elseif--- condition is not working as desired.
var editcount = document.getElementsByTagName('input');
var fcElement = document.activeElement;
var cpt = 0;
var bFlag = false;
for (cpt = 0; cpt < editcount.length; cpt++) {
if (editcount[cpt].id == fcElement.id && !bFlag) {
fcElement.value = "Username";
bFlag = true;
}
else if((editcount[cpt].type == "password"||editcount[cpt].type == "text" || editcount[cpt].type == "email") && bFlag === true) {
editcount[cpt].value = "Password";
break;
}
}
Here, the password is also copied on the same text field.
can anyone tell me whats wrong with the script ?
Thank you for your help.
I was having problem with my code.
I was comparing the ids of the two elements.
if (editcount[cpt].id == fcElement.id && !bFlag)
and this was not working for some web pages but now I got the solution for it.
I have changed the condition of comparision of elements as below.
if (editcount[cpt].name == fcElement.name && !bFlag)
and My problem has solved.
I am posting my working code here...
`
var editcount = document.getElementsByTagName('input');
var fcElement = document.activeElement;
var cpt = 0;
var bFlag = false;
console.log(fcElement);
for (cpt = 0; cpt < editcount.length; cpt++) {
console.log(editcount[cpt]);
if (editcount[cpt].name == fcElement.name) {
fcElement.value = "Username";
bFlag = true;
} else if ((editcount[cpt].type == "password" || editcount[cpt].type == "text" || editcount[cpt].type == "email") && bFlag === true) {
editcount[cpt].value = "Password";
break;
}
}`
Thank you for your cooperation.
Merry Christmas.
I have to fix some form validation but there's no jQuery included in the host page. I'd normally do something like this...
if ($("#contactNameAdd").val() !== '' || $("#contactPhoneAdd").val() !== '') {
$("#contactForm").show()
};
How can I re-write that in normal js?
var name = document.getElementById("contactNameAdd");
var phone = document.getElementById("contactPhoneAdd");
var form = document.getElementById("contactForm");
if(name.value != '' || phone.value != '') {
form.style.display = "block";
}
if (document.getElementById('contactNameAdd').value !== '' || document.getElementById('contactPhoneAdd').value !== '') {
document.getElementById('contactForm').style.display = 'block';
}
In plain javascript, you use document.getElementById('id') to get DOM nodes based on the id attribute. You use .value on a DOM Input element to get its value. And you use .style on any DOM element to set css attributes. In this case "show" means "display: block;".
if (document.getElemenById('contactNameAdd').value != '' || document.getElementById('contactPhoneAdd').value != '') {
document.getElementById('contactForm').style.display = 'block';
}
Try this - checks the 2 values then changes the style.display property of the 'contactForm'
This should do the trick.
var contactNameAdd = document.getElementById("contactNameAdd");
var contactPhoneAdd = document.getElementById("contactPhoneAdd");
if((contactNameAdd !== null && contactNameAdd.value !== '') || (contactPhoneAdd !== null && contactPhoneAdd.value !== ''))
{
document.getElementById("contactForm").style.display = 'block';
}
var contactName = document.getElementById('contactNameAdd');
var contactPhone = document.getElementById('contactPhoneAdd');
if(contactName.value !== '' || contactPhone.value !== '') {
// Different as JQuery, there will be no animation.
// I assume you use 'display:none' to hide the form.
var form = document.getElementById('contactForm');
form.style.display = 'block';
}