Trying to get a script working using Javascript's replace string

Question

I'm just working on this script but I can't figure out why it won't run! Any help appreciated.

Javascript

$(document).ready(function() {
var str = document.getElementById('size').innerHTML; 
var res = str.replace('<p>','<input type="checkbox" value="');
var res = str.replace('</p>','" id="size" name="size[]" checked />');
document.getElementById('size').innerHTML=res;
});

HTML

<div id="size">
    <p>xs</p>
    <p>s</p>
    <p>m</p>
    <p>l</p>
    <p>xl</p>
</div>

Here's the JS Fiddle: http://jsfiddle.net/L2LGV/

`Uncaught ReferenceError: $ is not defined` — **read the error console** in your browser! — Quentin, Nov 28 '13 at 15:00
Use jQuery (once included) to modify the properties, rather than modifying the actual html string. — Johan, Nov 28 '13 at 15:01
That's a horrible way to replace content on a page.....you need to research a bit of dom manipulation and have a look a the jQuery methods available here and rethink your idea - http://api.jquery.com/category/manipulation/ — Mark Walters, Nov 28 '13 at 15:02
possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Mar 07 '14 at 11:42

score 6 · Answer 1 · answered Nov 28 '13 at 15:04

6

The way you're trying to do it is not the best way.

See this quick example of how I'd implement it.

$(document).ready(function() {
    jQuery('#size p').each(function(){
        var html = '<input type="checkbox" value="' + jQuery(this).text() + 'id="size" name="size[]" checked />';
        jQuery(this).replaceWith(html);
    });
});

http://jsfiddle.net/L2LGV/5/

answered Nov 28 '13 at 15:04

CharliePrynn

3,034
5
40
68

Word of warning, you should probably escape the value of the
first. – CharliePrynn Nov 28 '13 at 15:06
Thanks, I'll implement this and read more about JavaScript and jQuery before asking about it again. – Cozmoz Nov 28 '13 at 16:18

score 1 · Accepted Answer · answered Nov 28 '13 at 15:04

First of all, jQuery is not included.

Then here what you code do :

var res = str.replace('<p>','<input type="checkbox" value="');
// replace str which is equal to <p>...</p> to <input type="checkbox" value="...</p>
var res = str.replace('</p>','" id="size" name="size[]" checked />');
// replace str which is equal to <p>...</p> to <p>" id="size" name="size[]" checked />

Try using this instead :

var res = str.replace('<p>','<input type="checkbox" value="');
var res = res.replace('</p>','" id="size" name="size[]" checked />');

Also, if you want to replace every occurence, use regexp :

var res = str.replace(/<p>/g,'<input type="checkbox" value="');
var res = res.replace(/<\/p>/g,'" id="size" name="size[]" checked />');

http://jsfiddle.net/L2LGV/6/

Thanks that was very helpful with letting me see where I went wrong with my script. — Cozmoz, Nov 28 '13 at 16:13

score 1 · Answer 3 · edited May 23 '17 at 12:21

1st, you overwrite the res variable by declaring it twice:

var res = str.replace('<p>','<input type="checkbox" value="');
var res = str.replace('</p>','" id="size" name="size[]" checked />');

Which should be:

var res = str.replace('<p>','<input type="checkbox" value="');
res += str.replace('</p>','" id="size" name="size[]" checked />');

Secondly, you are not including jquery.

Note that using innerHTML is a bad idea! Use jQuery's html functions. Last but not least: why are you using jQuery when you select elements with getElementById?!? Use $('#<id>')..

score 1 · Answer 4 · answered Nov 28 '13 at 15:27

Here's a solution without str.replace():

$(document).ready(function() {
    var list = document.getElementById('size').getElementsByTagName('p'), output = '';
    for(var i = 0; i < list.length; ++i){
        output += '<input type="checkbox" value="';
        output += list[i].innerHTML;
        output += '" id="size" name="size[]" checked />';
    }
    document.getElementById('size').innerHTML=output;
});

http://jsfiddle.net/L2LGV/7/

Trying to get a script working using Javascript's replace string

4 Answers4