Menu
I’m writing a program for my web programming class where we need to type a word, the number of times we want to repeat the word, and the color we want the word to be. I’m having a couple of issues with it. First, I can’t figure out how to change the color based on what I type into the textbox. And second, I can’t get anything to display when I click the button. Here’s all the code I typed up so far.
[code]
<html>
<head>
<title></title>
<style type=”text/css”>
body {
background-color: #D3D3D3;
font-family: arial;
text-align: right;
color: #008B8B;
}
#contentwrap {
border: 8px #800000 solid;
padding: 20px;
width: 600px;
border-radius: 25px;
text-align: right;
background: white;
margin: 40px auto 0px auto;
}
#formwrap {
text-align: center;
margin: 0px 0px 60px 0px;
min-height: 300px;
}
#title {
font-size: 2.2em;
border-bottom: 7px #008B8B double;
padding: 10px 0px 10px 0px;
color: #008B8B;
text-align: center;
}
#formtext {
text-align: center;
margin-top: 5px;
}
.formfield {
text-align: center;
margin: 5px 20px 10px 20px;
}
#button {
border-radius: 20px;
}
#output {
font-size: 1em;
}
#repeatedword {
color: usercolor;
}
</style>
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.min.js” integrity=”sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=” crossorigin=”anonymous”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#button”).on (“click”, function(){
var word = parseFloat(“#word”);
var repeatnum = parseFloat(“#repeatnum”);
var usercolor = parseFloat(“#usercolor”);
var msg = “”;
for(var i = 1;i <= repeatnum; i++){
msg += “<div id=’repeatedword’>” + word + “</div>”;
}
$(“#output”).html(msg);
});
}); // ends document.ready
</script>
</head>
<body>
<div id=”contentwrap”>
<div id=”title”>Fun with Loops</div> <br />
<div id=”formwrap”>
<form>
<div id=”formtext”>Enter any word</div>
<div><input type=”text” id=”word” class=”formfield” size=”20″></div>
<div id=”formtext”>Enter number of times to repeat word</div>
<div><input type=”text” id=”repeatnum” class=”formfield” size=”20″></div>
<div id=”formtext”>Enter color for text</div>
<div><input type=”text” id=”usercolor” class=”formfield” size=”20″></div>
<div style=”margin-top:10px;”>
<input type=”button” value=”Show Output” id=”button”>
</div>
</form>
<div id=”output”></div>
</div>
</div>
</body>
</html>