I have this star rate form and wanted you to start typing in the text area and it will show you the star rate form right away, but if the text area is empty, it will hide.
I discovered the following code:
JavaScript
x
14
14
1
<HTML>2
<input placeholder="Enter some text" name="name" />3
<p id="values"></p>4
5
<JS>6
const input = document.querySelector('input');7
const log = document.getElementById('values');8
9
input.addEventListener('input', updateValue);10
11
function updateValue(e) {12
log.textContent = e.target.value;13
}14
How can I combine this code into mine? Because it only does that now when I click outside of the text area and then show the stars. Please advise me on this!
JavaScript
1
105
105
1
@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);2
* {3
margin: 0;4
padding: 0;5
font-family: roboto;6
}7
8
body {9
background: #000;10
}11
12
.cont {13
width: 93%;14
max-width: 350px;15
text-align: center;16
margin: 4% auto;17
padding: 30px 0;18
background: #111;19
color: #EEE;20
border-radius: 5px;21
border: thin solid #444;22
}23
24
hr {25
margin: 20px;26
border: none;27
border-bottom: thin solid rgba(255, 255, 255, .1);28
}29
30
div.title {31
font-size: 2em;32
}33
34
h1 span {35
font-weight: 300;36
color: #Fd4;37
}38
39
div.stars {40
width: 270px;41
display: inline-block;42
}43
44
input.star {45
display: none;46
}47
48
label.star {49
float: right;50
padding: 10px;51
font-size: 36px;52
color: #444;53
transition: all .2s;54
}55
56
input.star:checked~label.star:before {57
content: 'f005';58
color: #FD4;59
transition: all .25s;60
}61
62
input.star-5:checked~label.star:before {63
color: #FE7;64
text-shadow: 0 0 20px #952;65
}66
67
input.star-1:checked~label.star:before {68
color: #F62;69
}70
71
label.star:hover {72
transform: rotate(-15deg) scale(1.3);73
}74
75
label.star:before {76
content: 'f006';77
font-family: FontAwesome;78
}79
80
.rev-box {81
height: 0;82
width: 100%;83
transition: all .25s;84
}85
86
textarea.review {87
background: #222;88
border: none;89
width: 50%;90
max-width: 100%;91
height: 50px;92
padding: 10px;93
box-sizing: border-box;94
color: #EEE;95
}96
97
label.review {98
display: block;99
transition: opacity .25s;100
}101
102
input.star:checked~.rev-box {103
height: 125px;104
overflow: visible;105
}JavaScript
1
51
51
1
<html>2
3
<head>4
<link rel="stylesheet" href="startratecss.css">5
6
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>8
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>9
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>10
</head>11
12
<body>13
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />14
15
<div class="cont">16
<div class="stars">17
<form>18
<div class="rev-box">19
<textarea class="review" id="review" cols="2" rows="2" name="review" onchange="asd(this)"></textarea>20
</div>21
<div id="rateYo" style="visibility: hidden;"></div>22
<input type="hidden" name="rating" id="rating_input" />23
24
</form>25
</div>26
</div>27
28
<script>29
function asd(txt) {30
var something = txt.value;31
var star = document.getElementById("rateYo");32
star.style.visibility = "visible";33
}34
35
$(function MyFunction() {36
$("#rateYo").rateYo({37
38
onSet: function(rating, rateYoInstance) {39
rating = Math.ceil(rating);40
$('#rating_input').val(rating); //setting up rating value to hidden field41
42
43
var bod = document.getElementById("review").value;44
window.location.href = 'mailto:your@gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;45
}46
});47
});48
</script>49
</body>50
51
</html>Advertisement
Answer
I have taken the liberty of rewriting your code to accomplish what you are trying to do.
Two tips I want to give you:
Decouple the data layer with the presentation layer. You are mixing CSS styles in stylesheets, HTML and JavaScript. You are also having JavaScript as strings in your HTML attributes. This gets confusing quite rapidly! We have gone a long way since HTML4 and the 90’s!
If you use a library, then use it. For example, you are using jQuery, then use it as it should instead of adding event handlers directly to the HTML attributes; jQuery has
$(element).on(event, handler), don’t do<div onclick="something(this)"></div>.
JavaScript
1
20
20
1
$(function MyFunction() {2
const textInput = $("#review").on('input', function () {3
if (textInput.val().length) {4
rateStar.show();5
} else {6
rateStar.hide();7
}8
});9
const ratingInput = $('#rating_input');10
const rateStar = $("#rateYo").rateYo({11
onSet: function(rating, rateYoInstance) {12
let inputValue = textInput.val();13
14
ratingInput.val(Math.ceil(rating)); //setting up rating value to hidden field15
16
console.log( rating, inputValue );17
// window.location.href = 'mailto:your@gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;18
}19
}).hide();20
});JavaScript
1
101
101
1
@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);2
* {3
margin: 0;4
padding: 0;5
font-family: roboto;6
}7
8
body {9
background: #000;10
}11
12
.cont {13
width: 93%;14
max-width: 350px;15
text-align: center;16
margin: 4% auto;17
padding: 30px 0;18
background: #111;19
color: #EEE;20
border-radius: 5px;21
border: thin solid #444;22
}23
24
hr {25
margin: 20px;26
border: none;27
border-bottom: thin solid rgba(255, 255, 255, .1);28
}29
30
div.title {31
font-size: 2em;32
}33
34
h1 span {35
font-weight: 300;36
color: #Fd4;37
}38
39
div.stars {40
width: 270px;41
display: inline-block;42
}43
44
label.star {45
float: right;46
padding: 10px;47
font-size: 36px;48
color: #444;49
transition: all .2s;50
}51
52
input.star:checked~label.star:before {53
content: 'f005';54
color: #FD4;55
transition: all .25s;56
}57
58
input.star-5:checked~label.star:before {59
color: #FE7;60
text-shadow: 0 0 20px #952;61
}62
63
input.star-1:checked~label.star:before {64
color: #F62;65
}66
67
label.star:hover {68
transform: rotate(-15deg) scale(1.3);69
}70
71
label.star:before {72
content: 'f006';73
font-family: FontAwesome;74
}75
76
.rev-box {77
/* height: 0; */78
width: 100%;79
transition: all .25s;80
}81
82
textarea.review {83
background: #222;84
border: none;85
width: 50%;86
max-width: 100%;87
height: 50px;88
padding: 10px;89
box-sizing: border-box;90
color: #EEE;91
}92
93
label.review {94
display: block;95
transition: opacity .25s;96
}97
98
input.star:checked~.rev-box {99
height: 125px;100
overflow: visible;101
}JavaScript
1
29
29
1
<html>2
3
<head>4
<link rel="stylesheet" href="startratecss.css">5
6
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>8
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>9
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>10
</head>11
12
<body>13
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />14
15
<div class="cont">16
<div class="stars">17
<form>18
<div class="rev-box">19
<textarea class="review" id="review" cols="2" rows="2" name="review"></textarea>20
</div>21
<div id="rateYo"></div>22
<input type="hidden" name="rating" id="rating_input" />23
24
</form>25
</div>26
</div>27
</body>28
29
</html>