HTML 926 HTML, CSS, and Dynamic HTML Tutorial 13 Exploring the Document Object M
ID: 3572241 • Letter: H
Question
HTML 926 HTML, CSS, and Dynamic HTML Tutorial 13 Exploring the Document Object Model 3. Go to the translate.js file in your text editor. Add a command to run the setup0 func tion when the page is initially loaded EXPLORE Create the setup0 function. The purpose of this function is to set up the Web page to how interactive translations of French to English. Add the following commands to the function: a. Create the questions variable that contains the object collection for all list items within ordered lists. Use the queryselectorAll() function with the appropriate CSS selector. b. Loop through the questions object collection. For each item in the collection, do the following: add a dynamic id value containing the text string iphrase, where i is the value of the index variable used in the loop; ii) add an onmousedown event handler to run the showEnglish0 function when the mouse pointer is pressed down on the item; iii) add an onmouseup event handler to run the showFrench0 function hen the mouse pointer is released over the item; and iv) change the style of the mouse cursor to pointer when it hovers over the item 5. Create the showEnglish0 function to translate the French phrases to English when a user clicks and holds the mouse button on a phrase in the ordered list within the document. Add the following commands to the function: a. Using the id property of the list item experiencing the mousedown event, extract the index number with the parselnt function and store that value in the phrase Number variable b. Set the HTML text of the current list item to the corresponding item in the english array. Use the phraseNumber variable to indicate the index number of the phrase in the english array. c. Set the font style of the current list item to italic. d. Set the color of the current list item to the value rgb(191, 22, 31) 6. Create the showFrench0 function. The purpose of this function is to redisplay the French phrase when the user releases the mouse button initiating the mouseup event. Add the following commands to the function: a. As you did with the showEnglish0 function, determine the index number of the phrase and then store that value in the phraseNumber variable. b. Change the text of the current list item to the text of the corresponding item in the french array, using the phraseNumber variable to indicate the index number c. Remove the inline styles for both the font-style property and the color property 7. Document your code with comments throughout the file and then close the file, sav ng your changes. 8. Open french.htm n your Web browser. Verify that when you press and hold the mouse button on each of the 10 French phrases, the text of the phrase is replaced by the English translation in a red italic font. Further verify that when you release the mouse button, the text returns to the original French phrase in the standard font style. 9. Submit your completed files to your instructor, in either printed or electronic form as requestedExplanation / Answer
The I'd number is generated dynamically using setup() function
U need to use that.in the code u have written,a variable index is used.
But the exact I'd selection required in the question is not substituted there.
U have to use the iphrases ids generated in setup function,and then use
var phrasenumber= parseInt(questions[I].I'd)
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.