Dynamic list working in jsfiddle but not in chrome

Question

I'm creating a text replace extension for Google Chrome where the user can enter the word to replace and the word they want to replace it with. The options page should be a dynamic list, and as stated above, I can add boxes in jsfiddle but when I open the options page in chrome, it won't add any new boxes or anything.

Here is the link: http://jsfiddle.net/3K9jg/4/

Maybe it has something to do with the following but I honestly have no idea...

$("#add").click(function(e) {
$("#wordreplacer").append($("#wordreplacer div.input:eq(0)").clone(true));
$("#wordreplacer div.input").eq(-1).find("input").val('');
e.preventDefault();
});

I'm pretty new to javascript and after searching for weeks, I still can't figure out why this is happening. Thanks in advance for the help.

Answer 1

Can you please try the below code.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='/js/lib/dummy.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>
    window.onload = function () {
        var origList = [];
        var replacementList = [];

        var originalWord = document.getElementById("originalword");
        var replacementWord = document.getElementById("replacementword");
        var messageBox = document.getElementById("wordreplacer");

        function insert() {
            origList.push(originalWord.value);
            replacementList.push(replacementWord.value);
        }

        $("#add").click(function (e) {
            $("#wordreplacer").append($("#wordreplacer div.input:eq(0)").clone(true));
            $("#wordreplacer div.input").eq(-1).find("input").val('');
            e.preventDefault();
        });
    }

</script>


</head>
<body>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<body>
    <h3>Enter word and its replacement</h3>
    <form id="wordreplacer">
    <div class="input">
        <input id="originalword" type="text" placeholder="Original Word" />
        <input id="replacementword" type="text" placeholder="Replacement Word" />
    </div>
    </form>
        <input type="button" id="add" value="Add" onclick="insert()" />

</body>

</body>


</html>

I'm able to add boxes on clicking Add button. Please let me know of this helps.

Dynamic list working in jsfiddle but not in chrome

Question

1 answers

solution1
0 2014-01-24 08:14:31

Dynamic list working in jsfiddle but not in chrome

Question

1 answers

solution1 0 2014-01-24 08:14:31

solution1
0 2014-01-24 08:14:31