javascript Uncaught TypeError: .indexOf is not a function

Question

This is the javascript code:

/**
* Created by Alejandro on 25/02/2016.
*/

var aantalKoppels = 2;

function setup(){
    var btnToevoegen = document.getElementById("btnToevoegen");
    btnToevoegen.addEventListener("click", koppelToevoegen);
    var btnReplace = document.getElementById("btnReplace");
    btnReplace.addEventListener("click", update);
}

function koppelToevoegen() {
    var parameterDataKoppel = document.createElement("div");
    var labelParameter = document.createElement("label");
    labelParameter.innerHTML = "Parameter:";
    labelParameter.setAttribute("for", "parameter" + aantalKoppels);
    var parameter = document.createElement("input");
    parameter.id = "parameter" + aantalKoppels;
    parameter.setAttribute("type", "text");
    var labelData = document.createElement("label");
    labelData.innerHTML = "Data:";
    labelData.setAttribute("for", "data" + aantalKoppels);
    var data = document.createElement("input");
    data.id = "data" + aantalKoppels;
    data.setAttribute("type", "text");
    parameterDataKoppel.appendChild(labelParameter);
    parameterDataKoppel.appendChild(parameter);
    parameterDataKoppel.appendChild(labelData);
    parameterDataKoppel.appendChild(data);
    var parameterDataKoppels = document.getElementById("parameterDataKoppels");
    parameterDataKoppels.appendChild(parameterDataKoppel);
    aantalKoppels++;
}

function update() {
    var parameterDataKoppels = [];
    var rangnummerKoppel = 1;
    for(var i = 0; i < aantalKoppels - 1; i++) {
        var parameter = (document.getElementById("parameter" + rangnummerKoppel)).value;
        var data = (document.getElementById("data" + rangnummerKoppel)).value;
        parameterDataKoppels[i] = [parameter.trim(), data.trim()];
        rangnummerKoppel++;
    }
    var template = document.getElementById("template");
    vervangAlles(template, parameterDataKoppels);
}

function vervangAlles(template, parameterDataKoppels) {
    for(var i = 0; i < parameterDataKoppels.length; i++) {
        var result = vervang(template, parameterDataKoppels[i][0], parameterDataKoppels[i][1]);
        template = result;
    }
    var output = document.getElementById("txtOutput");
    output.innerHTML = template;
    return template;
}

function vervang(template, parameter, data) {
    var result = template.substring(0, template.indexOf(parameter)) + data;
    var i = template.indexOf(parameter) + parameter.length;
    while(template.indexOf(parameter, i) !== -1) {
        var indexVolgende = template.indexOf(parameter, i);
        result += (template.substring(i, indexVolgende)) + data;
        i = indexVolgende + parameter.length;
    }
    result += template.substring(i, template.length);
    return result;
}

window.addEventListener("load",setup,false);

This code should take a template (String), parameters (String word out of text) and data (String) as input to then replace al the parameters in the text by the String data. I do get an error which I can't figure out at the first line in the last function:

Uncaught TypeError: template.indexOf is not a functionvervang @ ReplaceFunction.js:61vervangAlles @ ReplaceFunction.js:52update @ ReplaceFunction.js:47

this is the html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8"  src="../scripts/ReplaceFunction.js"></script>
    <title>ReplaceFunction</title>
</head>
<body>

<div>
    <label for="template">Template:</label>
    <input id="template" type="text" />
</div>

<div id="parameterDataKoppels">
    <div>
        <label for="parameter1">Parameter:</label>
        <input id="parameter1" type="text" />
        <label for="data1">Data:</label>
        <input id="data1" type="text" />
    </div>
</div>

<input id="btnToevoegen" type="button" value="Koppel toevoegen" />
<input id="btnReplace" type="button" value="Replace" />
<p id="txtOutput">geen output</p>

</body>
</html>

I hope somebody knows why I get this error.

You have template = document.getElementById("template"). Element don't have the indexOf method. — Oriol
– Oriol, Commented Feb 26, 2016 at 1:07
The error means that you expect template to be a reference to an object with an indexOf() method, but it isn't. — Pointy
– Pointy, Commented Feb 26, 2016 at 1:09
Ow yes of course I forgot my .value at the end of the getElementById because I need it as a String to be able to use indexOf :p Solution: var template = (document.getElementById("template")).value; Thx a lot (I always forget the .value property with Strings) — Alejandro
– Alejandro, Commented Feb 26, 2016 at 1:12

Jacob · Accepted Answer · 2016-02-26 01:17:02Z

1

It seems like your 'update' should be

function update() {
    var parameterDataKoppels = [];
    var rangnummerKoppel = 1;
    for(var i = 0; i < aantalKoppels - 1; i++) {
        var parameter = (document.getElementById("parameter" + rangnummerKoppel)).value;
        var data = (document.getElementById("data" + rangnummerKoppel)).value;
        parameterDataKoppels[i] = [parameter.trim(), data.trim()];
        rangnummerKoppel++;
    }
    //var template = document.getElementById("template");
    var template = document.getElementById("template").value;
    vervangAlles(template, parameterDataKoppels);
}

edited Feb 26, 2016 at 1:17

Jacob

79k24 gold badges159 silver badges245 bronze badges

answered Feb 26, 2016 at 1:15

Alrt.Lin

224 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript Uncaught TypeError: .indexOf is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related