Question

我试图在不同的按钮控件上加载不同的内容。因为我是javascript的新手而且不知道我到底在哪里做错了。

如果您对任何一方有任何帮助并且提前非常感谢，我们将非常感谢！

其代码在这里

 (function () {

        var getText = document.getElementById('text'),
            getSmallImage = document.getElementById('smallimage'),
            getLargeImage = document.getElementById('largeimage');

        function ChangeState(event) {

            var myDiv = document.createElement('div');
            myDiv.className = 'dynamicDiv';
            document.body.appendChild(myDiv);

            //style the div
            var a = document.getElementsByClassName('dynamicDiv')
            for (var i in a) {

                a[i].style.width = '400px';
                a[i].style.height = '400px';
                a[i].style.color = 'rgb(255,255,0)';
                a[i].style.background = 'rgb(0,102,153)';
                a[i].style.padding = '10px';
            }

            if (event.target.id == getText) {
                myDiv.appendChild(document.createTextNode('This is my div'));
            }

            else if (event.target.id == getSmallImage) {
                var smallImage = document.createElement('img');
                smallImage.src = 'Images/smallimage.jpg';

                myDiv.appendChild(smallImage);
            }
            else if (event.target.id == getLargeImage) {
                var largeImage = document.createElement('img');
                largeImage.src = 'Images/largeimage.jpg';

                myDiv.appendChild(largeImage);
            }
        }

        getText.addEventListener('click', ChangeState, false);
        getSmallImage.addEventListener('click', ChangeState, false);
        largeimage.addEventListener('click', ChangeState, false);
    }
   ());

，HTML代码在这里：

<input id="text" type="button" value="Click to load Text" />
<input id="smallimage" type="button" value="Click to load Small Image" / />
<input id="largeimage" type="button" value="Click to load Large Image" />

同样的代码也在jsfiddler上：

http://jsfiddle.net/shabirgilkar/c7fBk/

Answer 1

而不是

else (event.target.id == getLargeImage) {...}

使用

else if (event.target.id == getLargeImage) {...}

或从第一个片段中移除条件。

IIFE也在body及其元素不存在时执行，因此所有引用元素的变量都是null。使用一些load事件或在结束body标记之前放置脚本。

修改

您已从.id移除if (event.target.id === getText){...}，因为您的变量已经引用了元素而不是id。此外，每次点击都不需要为所有div创建内联样式，我已经删除了循环并仅设置了新创建的div样式。（虽然这个div有一个类名，为什么不使用CSS来设置div的样式？）

固定代码适用于jsFiddle，请注意onLoad选择。

Answer 2

我的朋友帮忙解决了这个问题，非常感谢@teemu所做的一切。解决的代码如下：

   (function () {

        function ChangeState(event) {

            var myDiv = document.createElement('div');

            //style the div
            myDiv.className = 'dynamicDiv';
            myDiv.style.color = 'rgb(255,255,0)';
            myDiv.style.background = 'rgb(0,102,153)';
            myDiv.style.padding = '10px';

            document.body.appendChild(myDiv);

            if (event.target.id == 'text') {
                myDiv.appendChild(document.createTextNode('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'));
            }

            else if (event.target.id == 'smallimage') {
                var smallImage = document.createElement('img');
                smallImage.src = 'Images/smallimage.jpg';

                myDiv.appendChild(smallImage);
            }
            else if (event.target.id == 'largeimage') {
                var largeImage = document.createElement('img');
                largeImage.src = 'Images/largeimage.jpg';

                myDiv.appendChild(largeImage);
            }
        }
        document.getElementById('text').addEventListener('click', ChangeState, false);
        document.getElementById('smallimage').addEventListener('click', ChangeState, false);
        document.getElementById('largeimage').addEventListener('click', ChangeState, false);

    }
   ());

我希望这对某些人有帮助！

加载不同内容，点击不同的控件

2 个答案: