I am making a text changer website https://textchanger.netlify.com/ and ran into a problem when trying to have a error display. I want the error to be displayed whenever the user tries to convert "nothing".
The error does display, and everything to that aspect works fine, but there's some errors in the Chrome console I can't seem to debug.
Error: textchanger.js:43 Uncaught TypeError: Cannot read property 'split' of undefined
at Scrambler (textchanger.js:43)
at HTMLButtonElement.<anonymous> (textchanger.js:80)
If anybody has ideas that'd be awesome!
JSfiddle: https://jsfiddle.net/MysteriousDuck/duc0atjz/
//Check if textinput is not empty
function fooBar(text) {
if (document.getElementById("inputText").value == "") {
console.log('Can not convert nothing!')
} else {
capitalizer()
}
}
return textArray.join(''); {
}
//Capitalize every odd letter
function capitalizer() {
if (document.getElementById("inputText").value == "") {
alertify.error('Can not convert nothing!')
} else {
var x = document.getElementById("inputText").value;
var string = "";
for (let i = 0; i < x.length; i++) {
if (i % 2 == 0) {
string = string + x[i].toUpperCase();
} else {
string = string + x[i];
}
}
return string;
}
}
The error is contained within your scrambler() function. This function is being executed every time a user clicks the Convert button irregardless of the input they entered into the textarea. This because your event listener is simply listening to clicks on this Convert button and for each click it simply runs the scrambler() function based on said input. You need to add input validation check here to fix this from only running on valid input.
Your Convert Button Listerner:
convertText.addEventListener('click', function() {
if (checkbox_1.checked && checkbox_2.checked) {
console.log("Capitalizing + Scrambling text");
document.getElementById("convertedText").value = scrambler(capitalizer());
} else if (checkbox_2.checked) {
console.log("Scrambling text");
var text = document.getElementById("inputText").value;
document.getElementById("convertedText").value = scrambler(text);
} else if (checkbox_1.checked) {
console.log("Capitalizing text");
document.getElementById("convertedText").value = capitalizer();
}
})
Notice there is no input validation in this event listener and it assumes a valid value within your convertedText textarea so this is why you're getting the undefined error when a user enters nothing to be converted i.e. there is no convertedText to split
Uncaught TypeError: Cannot read property 'split' of undefined
Hopefully that helps!
The code document.getElementById("convertedText").value = scrambler(capitalizer()); throws an error.
capitalizer() in the code upper returns undefined
Because inside the method fulfills the condition alertify.error('Can not convert nothing!') which returns nothing i.e undefined
Then scrambler tries to split a text parameter which equal undefined
Related
Good afternoon,
Please, could you help me with an issue below.
I am getting an error "Cannot read properties of null (reading 'split')" when trying to click "cancel" on prompt.
What all I want, to loop canceled when I cancel it in prompt.
ps.: this is a simple array with a name/surname which in future will shows via console.log
function UserList () {
let users = [];
while(true) {
users.push (prompt('Please, enter your name surname?').split(' '));
if (prompt=== null) {
alert('cancel');
}
}
}
let userList = new UserList();
You need to test whether the result of prompt() is null before you try to split it.
You need to break out of the loop when the user cancels, otherwise the function will never return.
Also, since you're using this as a object constructor, users should be a property this.users.
function UserList () {
this.users = [];
while(true) {
let response = prompt('Please, enter your name surname?');
if (response == null) {
alert('cancel');
break;
}
this.users.push (response.split(' '));
}
}
I am a beginner at Javascript and I am creating a form. The thing is I have a function that returns the value of the checkboxes (to check if they were checked or not) when the user submits his or her answer. I want to give the user a message if he / she does not select a value in the checkbox (not an error message). I have tried the following Javascript code:
function loopForm() {
var cbResults = " ";
var error = " You did not select a value";
for (var i = 0; i < myForm.elements.length; i++) {
if (myForm.elements[i].type == "checkbox") {
if (myForm.elements[i].checked == true) {
cbResults += myForm.elements[i].value + "<br />";
}
}
}
if (cbResults != undefined) {
return cbResults;
} else {
return error;
}
}
But when I submitted the results without checking the checkbox (once again this is not an error message) the message was not shown. (I stored the message in the error var). Can anyone help me solve this problem ?? Any help would be greatly appreciated. Please note that this is not my Full Code but just a portion of it.
I am trying to hide elements based on whether the user has added the class numbers to the database which I am retrieving through json data. If all the class numbers are present on the component I want to hide it.
At the moment I keep getting this error:
TypeError: $(...).data(...).split is not a function
export function VisaToggleComponent() {
let json = {
visa_subclass:[462,500,801]
};
let elements = document.querySelectorAll('[data-visa-hide]');
console.log(elements);
$(elements).each(function() {
let data = json.visa_subclass,
target = $(this).data('visa-hide').split(',').map(Number);
console.log(target);
for (let i in data) {
let val = data[i];
let index = target.indexOf(val);
if(index > -1) {
$(this).hide();
}
}
});
}
split is a method of the String object. Since you're getting
TypeError: $(...).data(...).split is not a function
It means $(this).data('visa-hide') is not a string.
To be honest, I didnt try to understand your code, however if you think $(this).data('visa-hide') is string-like data type you have to change $(this).data('visa-hide').split(',') to String.prototype.split.call($(this).data('visa-hide'), ',')
I'm fairly new to CRM development and I'm trying to customize my account form to Capitalize any text field at onChange. I'm currently working with this function that I found online:
function UpperCaseField(fieldName)
{
var value = Xrm.Page.getAttribute(fieldName).getValue();
if (value != null)
{
Xrm.page,getAttribute(fieldName).setValue(value.toUpperCase());
}
}
However, when I change a value in my test account it tells me that the method getValue() is not supported. Everything I've found tells me to use getValue(). Im at a loss.
Any help would be appreciated.
Thanks
If you're getting a getValue is not supported error, double check that the value for fieldName is actually a field on the form. It's best to code more defensively, like this:
function UpperCaseField(fieldName)
{
var attr = Xrm.Page.getAttribute(fieldName);
if (!attr) {
console.log(fieldName + " not found");
return;
}
var value = attr.getValue();
if (value != null)
{
attr.setValue(value.toUpperCase());
}
}
Update: When you connect your fields to JS functions via the form editor, CRM passes an event context as the first parameter. Here's what the code would look like in that case:
function UpperCaseField(context)
{
var fieldName == context.getEventSource().getName();
var attr = Xrm.Page.getAttribute(fieldName);
if (!attr) {
console.log(fieldName + " not found");
return;
}
var value = attr.getValue();
if (value != null)
{
attr.setValue(value.toUpperCase());
}
}
Here's more info about the context: https://msdn.microsoft.com/en-us/library/gg328130.aspx
Replace line
Xrm.page,getAttribute(fieldName).setValue(value.toUpperCase());
with line
Xrm.Page.getAttribute(fieldName).setValue(value.toUpperCase());
Also please provide a screenshot that shows how you use/register this handler.
I'm trying to create a registration form and validate input fields using javascript, but I'm having difficulties after the for loop executes...
function checkValidation1() {
var elem = document.getElementsByTagName("input");
for(var i = 0; i < elem.length; i++) {
if($("#"+elem[i].id).val()=="") {
$("#"+elem[i].id+"error").html("<img src='images/exclamationsmall.png' title='"+elem[i].name+" should not be blank'>");
} else if(elem[i].name=="email") {
var emailReg = /^([_a-zA-Z0-9-]+)(\.[_a-zA-Z0-9-]+)*#([a-zA-Z0-9-]+\.)+([a-zA-Z]{2,3})$/;
if(!emailReg.test($("#"+elem[i].id).val())) {
$("#"+elem[i].id+"error").html("<img src='images/exclamationsmall.png' title='"+elem[i].name+" is invalid'>");
}
} else {
$("#"+elem[i].id+"error").html("");
}
}
alert("fasfasfasfasfasf");
}
The alert doesn't execute for some reason. Any ideas?
Verify that all of your input elements actually have an id attribute. Otherwise this line:
if ($("#" + elem[i].id).val() == "") {
...will result in an expression containing only an octothorpe -- $("#") -- and the following error:
Syntax error, unrecognized expression: #
...which ultimately prevents the code from reaching the alert.