You have a server-side script called “Ampersands.js” that cannot handle any ampe
ID: 3864170 • Letter: Y
Question
You have a server-side script called “Ampersands.js” that cannot handle any ampersands (&) in the form data. Write a script to convert all ampersands to and in the form field when the field loses focus element (blur).
A) Your script contains one (01) variable and two (02) functions:
1. Global variable: dom.
2. The function getElementAmpersand() that reads the field element by using the existing function getElementById() to access to the element using its id (field) specified in your HTML file by using the function addEventListener() to register the event handler, which takes three (03) arguments :
(a) the name of event as a string literal (here use "blur"), (b) the handler function convertAmpersands, and (c) the Boolean value false.
3. The function "convertAmpersands()" that converts all ampersands in the form field to " and " when the field loses focus ("blur").
4. The html document called "Ampersand.html", which invokes the "Ampersand.js" in the head section.
B) At the end of the JavaScript file, finish with this line to fire the load event when a resource and its dependent resources have finished loading: window.addEventListener( "load", getElementAmpersand, false );
Eile Edit View History Bookmarks I ools Help Enter some text that includes at least one & then click outside the input box. SC&SE; Result is Enter some text that includes at least one & then click outside the input box SC and SEExplanation / Answer
JS File :
var dom;
function getElementAmpersand() {
var value = document.getElementById('input-1').value;
if (value.length != 0)
convertAmpersands(value);
}
function convertAmpersands(value) {
while (value.indexOf("&") != -1) {
value = value.replace("&", " and ");
}
document.getElementById('input-2').value = value;
}
window.addEventListener("load", getElementAmpersand, false);
HTML :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script
src="Ampersands.js"></script>
</head>
<body>
<label for="input-1">Input:</label>
<input id="input-1" placeholder="Text" type="text" />
<label for="input-2">Input:</label>
<input id="input-2" placeholder="Text" type="text" />
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.