0

ユーザーの入力によって提供された画像をhtmlページの本文に配置する機能があります。2 番目の入力を受信したら、この画像を新しい画像に置き換えたいと思います。以下の関数でこれを実行しようとしました。

function show_image(src, alt) {
        var img = document.createElement("img");
        img.src = src;
        img.width = 400;
        img.height = 300;
        img.alt = alt;

        var counter;
        var mynodes= new Array();
        mynodes.push(img);
        counter+=1;

        if(counter==1){
            // This next line will just add it to the <body> tag
            document.body.appendChild(img);  
        }
        else if(counter!=1)
        {
            var newNode=mynodes[counter-1];
            var oldNode=mynodes[counter-2];
            document.body.replaceChild(newNode,oldNode);
        }
4

3 に答える 3

1

変数counterはローカル変数です。メソッドが呼び出されるたびに、counter は 0 に初期化されます。

mynodes変数と同じです。配列には常に 1 つのノードしかありません。

したがって、ここでロジックを変更することをお勧めします。この関数を書き直す手助けが必要ですか?

于 2013-11-13T23:30:42.253 に答える
0

あなたのコードはまったく厄介です。私が知る限り、毎回ノード全体を変更するのではなく、同じ img タグを変更するだけで済みます。関数の理由はほとんどありません..

ライブデモについては、ここをクリックしてください。

function changeImg(img, src, alt) {
  //I doubt you even need a function for this.
  img.src = src;
  img.alt = alt;
}

var img = document.createElement('img');
//you could just use a css class instead...
//that's probably better anyway...why does your js care how it looks? 
img.width = 400;
img.height = 300;
document.body.appendChild(img);

changeImg(img, 'http://static.jsbin.com/images/favicon.png', 'image');

var imgSrcInput = document.getElementById('imgSrc');
var imgAltInput = document.getElementById('imgAlt');
var button = document.getElementById('change');

button.addEventListener('click', function() {
  changeImg(img, imgSrcInput.value, imgAltInput.value);
});

オブジェクト指向の例をまとめました。これにより、ロジックが非常に再利用可能で使いやすくなります。ここで動作中のコードをチェックしてください (クリック)。

window.onload = function() { //usage

  var someElement = document.getElementById('someIdHere');
  var anotherElement = document.getElementById('anotherIdHere');

  imageReplacer.setup({
    element: someElement,
    initSrc: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRg-icdkibfDt8VE7FkaKZyVUh8SBR4YTGd-2Jz1wZeUVacv4YD8zrvwclN',
    initAlt: 'Starting Image'
  });
  imageReplacer.setup({
    element: anotherIdHere,
    initSrc: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrHWuOzgYPbsuSF9cYQo3ORkcdIC4-8xaszlCrI3f7arAC7vhV7HwMN_fG',
    initAlt: 'Starting Image'
  });

};


var imageReplacer = { //package up your app
  setup : function(options) {
    //create a new imageReplacer so that each one will operate independently. The "this" pointer will refer to each element's imageReplacer.
    options.element.imageReplacer = Object.create(imageReplacer);
    options.element.imageReplacer.makeReplacer(options);
  },
  makeReplacer : function(options) {
    options.element.className = 'imageReplacer';
    var markup = this.createMarkup();

    this.changeImage(options.initSrc, options.initAlt);

    this.addClick(this.button);

    options.element.appendChild(markup);
  },
  createMarkup : function() {
     var frag = document.createDocumentFragment();

    this.srcInput = document.createElement('input');
    this.srcInput.type = 'text';
    this.srcInput.placeholder = 'Image Source';

    this.altInput = document.createElement('input');
    this.altInput.type = 'text';
    this.altInput.placeholder = 'Image Alt';

    this.button = document.createElement('button');
    this.button.textContent = 'Change Image';

    this.imgTag = document.createElement('img');

    frag.appendChild(this.srcInput);
    frag.appendChild(this.altInput);
    frag.appendChild(this.button);
    frag.appendChild(this.imgTag);

    return frag;
  },
  addClick : function(button) {
    var that = this;
    button.addEventListener('click', function() {
      that.changeImage(that.srcInput, that.altInput);
    });
  },
  changeImage : function(src, alt) {
    this.imgTag.src = src;
    this.imgTag.alt = alt;
  }
};
于 2013-11-13T23:45:24.103 に答える