画像クリックで新しいオブジェクトを作成し、私は次のコード（私はかなりunadvanced午前）しようとしているイメージが</p> <p>をクリックしたときに、私は新しいオブジェクトを作成したいHTML

を更新するために、そのプロパティを使用します。画像クリックで新しいオブジェクトを作成し、私は次のコード（私はかなりunadvanced午前）しようとしているイメージが</p> <p>をクリックしたときに、私は新しいオブジェクトを作成したいHTML

を

<body> 
     <h1>Container Verwaltung</h1> 
     <p>Welche Containerart wollen Sie anlegen ?</p> 
     <div> 
      <a href='#' id='gray'> <img src='gray.png' width='201' height='423'></a> 
      <a href='#' id='yellow'><img src='yellow.png' width='201' height='423'></a> 
      <a href='#' id='blue'> <img src='blue.png' width='201' height='423'></a> 
     </div> 

     <p>Liste Ihrer vorhandenen Containers:</p> 
     <div id='data'>Containers to be shown</div> 

     <script src="containerVerwaltung.js"></script> 
    </body>

私はjavascriptが、現時点では、このように見えますが、私はそこだけあなたがオブジェクトを作成しているので、それが

// function that has to create the new object on button click: 
function addContainerBlue(e) { 
    e.preventDefault(); 
    var containerBlue = new Object(); 
    containerBlue.name = "blue"; 
    containerBlue.use = "paper"; 
    return containerBlue; 
} 

// listener for the click: 
var blueImageLink = document.getElementById("blue"); 
blueImageLink.addEventListener("click", addContainerBlue); 

// provide info about the object in the HTML: 
document.getElementById('data').innerHTML = containerBlue.name;

出典

2016-12-13 Mario Christov

document.getElementById（ 'data'）。innerHTML = containerBlue.name; - オブジェクトがページのロード時に作成されないので、この行は関数内にあるはずです... – sinisake

実際には、イメージがクリックされたときに呼び出されるローカル関数を使用して新しいグローバルオブジェクトを作成します。私は、この新しく作成されたオブジェクトのプロパティを関数の外で関数の外で使用して要素の内容を更新できるようにしたいと思いますが、イメージをクリックした後にオブジェクトがメモリ内に残るようにします。これは可能ですか？ –

あなたは、クリックハンドラ内のinnerHTMLを設定する必要があります取得することはできません。あなたがボタンをaddContainerBlue実行]をクリックしたとき

// Now this is a global variable 
    var containerBlue = new Object(); 
    function addContainerBlue(e) { 
     e.preventDefault(); 
     containerBlue.name = "blue"; 
     containerBlue.use = "paper"; 
     document.getElementById('data').innerHTML = containerBlue.name; 
    } 

// listener for the click: 
var blueImageLink = document.getElementById("blue"); 
blueImageLink.addEventListener("click", addContainerBlue);

さて、あなたは、オブジェクトを作成し、containerBlueの名前プロパティにinnerHTMLプロパティを設定します。

出典

2016-12-13 19:56:26 Bazinga

イメージをクリックしたときに呼び出されるローカル関数を使って、新しいグローバルオブジェクトを実際に作成したいと思います。私は、この新しく作成されたオブジェクトのプロパティを関数の外で関数の外で使用して要素の内容を更新できるようにしたいと思いますが、イメージをクリックした後にオブジェクトがメモリ内に残るようにします。これは可能ですか？ –

はい、containerBlue変数を関数外に移動してください。私は答えを更新します。 – Bazinga

画像クリックで新しいオブジェクトを作成し、私は次のコード（私はかなりunadvanced午前）しようとしているイメージが</p> <p>をクリックしたときに、私は新しいオブジェクトを作成したいHTML

答えて

関連する問題