Question

目标是能够点击其中一个项目并查看其下方的说明和费用。这应该动态完成。以下是我到目前为止的情况：

    <!DOCTYPE HTML>
    <html> 
    <head> Assignment 4B 

    <div id="first" onclick="displayFirst()"> Cleanser </div>
    <div id ="second" onclick="displaySecond()"> Exfoliator </div>
    <div id ="third" onclick="displayThird()"> Toner </div>
    <div id ="fourth" onclick="displayFourth()"> Moisturizer </div>
    </head>
    <body>
    <script type = "text/javascript">
    
    function displayFirst()
    {
    	var d1=document.getElementByID("first");
    	var text=document.createTextNode("description: will cleanse the face and cost: $20");
    	d1.appendChild(text);
    }
    var d2 = document.getElementByID("second");
    function displaySecond()
    {
    	var d2=document.getElementByID("second");
    	var text=document.createTextNode("description: will exfoliate the face and cost: $30");
    	d1.appendChild(text);
    }
    var d3 = document.getElementByID("third");
    function displayThird()
    {
    	var d1=document.getElementByID("first");
    	var text=document.createTextNode("description: will toner the face and cost: $15");
    	d1.appendChild(text);
    }
    var d4 = document.getElementByID("fourth");
    function displayFourth()
    {
    	var d1=document.getElementByID("first");
    	var text=document.createTextNode("description: will moisturize the face and cost: $50");
    	d1.appendChild(text);
    }
    
    </script>
    </body>
    </html>

我能够创建textNode并附加它但是当我点击实际项目时没有任何反应。我不确定是否需要在每个功能中打印出来以显示它。

JavaScript附加到文档

0 个答案: