Javascript Function Statement - Issue with Splitting String

Hi there,

I’m trying my hand at creating my first JavaScript function. I’m trying to select some text from an active radio web element.

So far I’ve got the following code:

function() {
  var inputs = document.getElementsByTagName("input"),
      selectedRadios = "";
  for (var i = 0;i < inputs.length;i++) {
    if(inputs[i].type==="radio" && inputs[i].checked && inputs[i].parentNode.innerText) {
      selectedRadios += inputs[i].parentNode.innerText + "|";
    }
  }

  return selectedRadios;
}

Which when my first radio item is selected it returns the following string: 96 months | 100000 miles £283.22

This is the type of string I am trying to get. However, when I continue testing and switch to the second radio button, the string is concatenated and looks like this for example:
96 months | 100000 miles £283.22|108 months | 112500 miles £338.80
The bold item above is the new active radio button I have selected - it looks to append this to the end of the string.

I only want to get the last string item. Is there a way I can change this?

I’ve tried .pop but it’s not an array it’s a string and I don’t think I can use splice as the character length is different for each option.

Many Thanks

Maybe I am not thinking about this correctly, but where did you actually declared the variable selectedRadios?

Try this instead:

var inputs = document.getElementsByTagName("input");
let  selectedRadios = "";

Hi 1moregame,

Thanks for that but unfortunately I can’t do that because I’m writing it for Google Tag Manager and it doesn’t use ES6 :frowning: so it’s not compatible with let and const variables.

Then this:

var inputs = document.getElementsByTagName("input");
var  selectedRadios = "";

Updated code is:

function() {
  var inputs = document.getElementsByTagName("input"),
  var selectedRadios = "";
  for (var i = 0;i < inputs.length;i++) {
    if(inputs[i].type==="radio" && inputs[i].checked && inputs[i].parentNode.innerText) {
      selectedRadios += inputs[i].parentNode.innerText + "|";
    }
  }

  return selectedRadios;
}

I now get the following error message: Error at line 3, character 3: Parse error. ‘identifier’ expected

You need a semicolon to end line 2, not a comma.

var inputs = document.getElementsByTagName("input");

Just seen that I was just about to delete comment haha - will try now thank you!

It’s valid now but it still presents the original problem of concatenating the values when the second radio box is selected like this:

96 months | 100000 miles £283.22|108 months | 112500 miles £338.80|

Was looking at trying something like this but I’m getting an empty string now:

function() {
  var inputs = document.getElementsByTagName("input"),
      selectedRadios = "";
  for (var i = 0;i < inputs.length;i++) {
    if(inputs[i].type==="radio" && inputs[i].checked && inputs[i].parentNode.innerText) {
      selectedRadios += "|" + inputs[i].parentNode.innerText + "|";
    }
  }

var lastIndex = selectedRadios.lastIndexOf("|")
var finalLastIndex = lastIndex -2;
var firstIndex = finalLastIndex - 1;
var newVariable = selectedRadios.slice(
  selectedRadios.indexOf("${firstIndex}"),
  selectedRadios.lastIndexOf("${finalLastIndex}"))
  
 return newVariable;
  
}

At this point I am wondering if you don’t have a problem elsewhere in your code. What is the name of the variable you are assigning the function results to?

Do you have another global variable elsewhere in your code for selectedRadios? Or are you assigning the variable to something that isn’t properly cleared between runs?

The code I have here is the entire script. There’s nothing anywhere else. It’s a mini custom Javascript Variable.

At this point I really don’t know why this is happening. I can get the values but like I say when you switch radio button elements it just seems to push the last value to the end of the string instead of getting the only value of the active radio element. I was wondering if there was an issue with the for argument but I can’t seem to find the issue.

I’ve only just started learing JavaScript and wanted to try a practical example but this seems to be a heavy one to start with but it’s really frustrating me.

Also the strange thing is that it seems to stop at 2 joined strings when you click more than 2 times on the radio buttons then it starts to overwrite the values if different.

I get that it can be frustrating, especially in the early stages of learning a new concept or trying to apply a relatively new concept to a novel problem. One thing that I often use when I am stuck is a series of console.log statements to try and track down where the error is occurring.

How is your function triggered?

Yeah good shout with that. Thanks for your understanding and also your support with this.

The fuction works by looking for the input attribute and then the for statement should check the selected input is radio and then it’s getting the text contained within the parent element. I’ve attached a screenshot of the front-end code below:

Then these are the values I get when clicking between the radio buttons:

It’s so close it’s frustrating. Just don’t get why it’s combining both the previous value and the new value together. And its only showing the last nth item and the previous to last item. Just doesn’t make sense. And even not all 3 if you click them individually.

Which one of the two values comes first? Is it the nth value or the n-1 value?

So on the second radio button click, the new value would be this part in bold:
96 months | 100000 miles £283.22|108 months | 112500 miles £338.80|

So to the right.

If the nth value is the last value, then maybe approaching it as an array would work:

function() {
  var inputs = document.getElementsByTagName("input"),
  var selectedRadios = [];
  for (var i = 0;i < inputs.length;i++) {
    if(inputs[i].type==="radio" && inputs[i].checked && inputs[i].parentNode.innerText) {
      selectedRadios.push(inputs[i].parentNode.innerText);
    }
  }

  return selectedRadios[selectedRadios.length-1];
}

This would give you the last value added every time.

Thank you - I’m getting this error now though:

**Error at line 3, character 3: Parse error. 'identifier' expected**

Oops! I made that same type, change this line:

 var inputs = document.getElementsByTagName("input"); //needs semicolon

Ahhh soo close - it’s almost perfect but if there’s a value already in the string so this example:

96 months | 100000 miles £283.22|120 months | 125000 miles £283.22

and 96 months is n-1 selected option, and you go to choose 96 months as the current option (as opposed to 120 months), it keeps the previous 120 months as the outputted value.