I need star rating. In page value are comming from Java/Backend.(I need only javascript or prototypejs solution.)
Eg: If value come 1 then it must show 1 STAR.
If value come 2 then it must show 2 STAR and so on...till 5
This whole thing is happening in dynamic . I am using below code, but this does not create ID.
Javascript
function display() {
var x = "yr";
show_image(x ,2) ;
}
function show_image (id,number) {
var x = number;
var y = id;
for (var i =0; i<x; i++){
var img = document.createElement("img");
img.src = "stars.png";
document.getElementById(y).appendChild(img);
}
}
Thanks for help.
Check this fiddle1 fiddle2
//Just for Demo purpose
function getRating() {
var number = prompt("Enter the rating?");
if(number *= 1 > 0 && number <=5) {
show_image('yr', number);
} else {
alert("Enter valid rating, greater than 0");
}
}
function show_image (id,number) {
document.getElementById(id).innerHTML = '';
for (var i =0; i<number; i++){
var img = document.createElement("img");
img.height=10;
img.src = "http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/512/star-full-icon.png";
document.getElementById(id).appendChild(img);
}
}
Your code has no issue, it is working fine. Simplest way to call this function from your Java Servlet/JSP response is, added <script>show_image('_some_id_', number_of_star)</script>
Add comment, if you have any query, or if my understanding of problem itself is not correct.
Related
function doGetWord(){
var word = F.gword.value;
var wLength = word.length;
for(var i = 0; i < wLength; i++){
document.getElementById("dword").innerHTML += "_ "
}
}
This is a function that will write _ in a div in html, and what I want is to change them if the user types the corresponding input, for example if the first letter is supposed to be "a" then it would change the first _ to "a".
This is what I got so far:
function doGuessWord(){
dummy = F.t.value
if(dummy.length > 1){
dummy = ""
F.t.value = ""
}
for(var x = 0; x < wLength; x++){
if (substr(x, wLength) == dummy ) {
document.getElementById("dword").innerHTML += "_ "
}
else{
document.getElementById("dword").innerHTML += "dummy "
}
}
}
Could you help me out with this one?
Thanks in Advance!!
Something like this?
https://jsfiddle.net/9z66968a/3/
You will have to adapt it a bit. But you should be able to take the parseText function and pass it the params you need to return the text to insert where ever you want
There you go. I believe this is what you wanted. Feel free if you don't understand something
https://jsfiddle.net/vhsf8gpp/2/
var dashArr = [];
var dummyWord = document.getElementById('dummy');
var input = document.querySelector('input');
var counter = 0;
for(let i= 0; i<10;i++)
{
dashArr.push('_');
}
function WriteContent()
{
dummyWord.textContent = dashArr.map(d=>d).join(''); // This gets rid of the ',' inbetween the dashes
}
WriteContent();
//var charArr = [];
document.querySelector('input').addEventListener('keyup',function(){
var inputString = input.value;
dashArr[counter] = inputString.charAt(inputString.length - 1);
WriteContent();
counter++;
})
I used this post for reference.
I am getting images in a loop and in loop I am making a html string, now within loop based on condition I want to add few attributes to specific images, that's not working properly for me, please help .
for(var i = 1; i <= 17; i++) {
//var ind = parseInt(i / 4);
var ind = i;
if(ind==1){
var step = " data-step=\'4\' data-show=\'sports\'data-intro=\'community\'" ;
}
else if(ind==2 ){
var step = " data-step=\'5\' data-show=\'sports\'data-intro=\'community\'" ;
}
else {
setp ='';
}
html +='<img src="'+baseurl+'front/images/layers/small/'+i+'.png" class="img-block cur" id="img-block-'+i+'" data-ls=\'{"index":'+ind+',"width":"'+arrWidthSizes(i)+'"}\' onclick="LoadDemoPopup_create('+i+')" />';
}
How do I add this step within image tag?
Maybe a silly question but I am stuck with this.
So I'm a beginning programmer and I'm trying to make four in a row using javascript and html.
The game works just fine, but I'm using a prompt to make the players choose a column. This isn't very user friendly, so I would like to use html buttons for this (one for every column).
However, I can't get it to work. I think the code is being executed before the buttonclick.
the button should give the var column the right value every turn.
place will place a 1 or 2 (resembling the player) into a 2d array
checkField will check if there are 4 in a row
This is what I have now:
in the body :
<button onclick="clickButton(1)" style="position:absolute; left:300px; top:10px">A</button>
And in the script:
var turn = 1;
var wichPlayer = 0;
var noFourInARow = true;
while(noFourInARow){
if(turn%2 == 1){
wichPlayer = 1;
}
else{
wichPlayer = 2;
}
function clickButton(k){
var column = k;
array = place(row,wichplayer,column);
turn++;
noFourInARow = checkField(row, wichPlayer, player1, player2);
}
}
When you click button your code is not re-evaluated. SO you run only portion inside button function. Why not move all actions into button?
function action() {
var turn = 1;
var wichPlayer = 0;
var noFourInARow = true;
while(noFourInARow){
if(turn%2 == 1){
wichPlayer = 1;
}
else{
wichPlayer = 2;
}
}
function clickButton(k){
var column = k;
array = place(row,wichplayer,column);
turn++;
noFourInARow = checkField(row, wichPlayer, player1, player2);
action();
}
This is just an example to change point of view. I'm not sure what you are doing with your code so...
Hello there I'm new to the world of Javascript, and I really really need help for school project.
What I want to do, is to display on another windows not only the text with the price, but also the image itself. I tried to add the id on the image and added it to function. Anybody please?
I have this code here in the body element along with other images:
Nike 1
price:$110.99
Size: 9
10
11
<input type= submit value=submit onclick="a()">
This is my script function:
<script>
function a(){
var size ="";
var price = 0;
if(document.getElementById('nike1').checked)
{
price=document.getElementById("nike1").value;
var x =document.getElementById("myimg").src;
}
else if(document.getElementById('nike2').checked)
{
price=document.getElementById('nike2').value;
}
var inputs = document.getElementsByName('r1');
for(var i =0; i<inputs.lenght; i++){
if(inputs[i].checked){
size = inputs[i].value;
}
}
var inputs1 = document.getElementsByName('r2');
for(var i =0; i <inputs1.lenghts;i++){
if(inputs1[i].checked){
size=inputs1[i].value;
}
}
var myWindow = window.open("","MsgWindow","width=200,height=400");
myWindow.document.write("<p><h1>Order Detail</h1> Your ordered Nike shoes<br/> Size:"+size + "<br/>Price:S"+ price + "</p>");
}
Please indent you code for readability. Here it is, a little bit cleaned and with error fixes.
function a() {
var size, price;
if (document.getElementById('nike1').checked) {
price = document.getElementById("nike1").value;
var x = document.getElementById("myimg").src;
} else if (document.getElementById('nike2').checked) {
price = document.getElementById('nike2').value;
}
var inputs = document.getElementsByName('r1');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
size = inputs[i].value;
}
}
var inputs1 = document.getElementsByName('r2');
for (var i = 0; i < inputs1.length; i++) {
if (inputs1[i].checked) {
size = inputs1[i].value;
}
}
var myWindow = window.open("", "MsgWindow", "width=200,height=400");
myWindow.document.write('<p><h1>Order Detail</h1> Your ordered Nike shoes<br/>'+
'<img src="path/to/your/image.png" alt="Nike shoes"></img>'+
'<p>Size: ' + size + '<br/>Price: ' + price + '</p>');
}
To solve your problem, write an img element with a src attribute. Change "path/to/your/image.png" with the real path to the image you want to display.
There were also errors in your code. Your two for loops contained a wrong value: your wrote lenght in the first and lenghts in the second. I fixed it. I tested it and it works. This fiddle is fairly simple and incomplete but shows you the result.
Can we get the count of total radiobuttonlist items from .aspx page. I have to call a javascript function onclientclick of a button and i want to loop through the total number of radiobuttonlist items. So can anyone tell me that can we get it from .aspx page. Because in my scenario i can not use code behind for this.
function ClearRBL() {
for (i = 0; i < RBLCOUNT; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
How can i get RBLCOUNT here from .aspx page only? If not possible then in Javascript please.
I don't know how the aspx side would work, but if you want to do it just in JavaScript you could do something like the following that doesn't need to know the total number of elements in advance:
function ClearRBL() {
var i = 0,
rbl;
while (null != (rbl = document.getElementById('rblWorkerList_' + i++)))
rbl.checked = false;
}
The above assumes that the element ids end in numbers beginning with 0 counting up by 1s; the while loop will keep going until document.getElementById() doesn't find a matching element (in which case it returns null). A less cryptic way of writing it is as follows:
function ClearRBL() {
var i = 0,
rbl = document.getElementById('rblWorkerList_' + i);
while (null != rbl) {
rbl.checked = false;
i++;
rbl = document.getElementById('rblWorkerList_' + i);
}
}
P.S. When the while loop finishes i will be equal to the number of radio buttons, which may be useful if you want to do something with that number afterwards.
Try this:- This is not exactly what you want but hope it will help you.
function GetRBLSelectionID(RadioButtonListID) {
var RB1 = document.getElementById(RadioButtonListID);
var radio = RB1.getElementsByTagName("input");
var isChecked = false;
var retVal = "";
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
retVal = radio[i].id;
break;
}
}
return retVal;
}
you can give a name all radio button and then get them like this.
var RBLCOUNT= document[groupName].length;
or
var RBLCOUNT= 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if(inputs[i].type =="radio"){
RBLCOUNT++;
}
}
I just created a javascript function as mentioned by Karthik Harve and found the total number of rows generated dynamically as below: -
function ClearRBL() {
var rblLen = document.getElementById('rblWorkerList');
for (i = 0; i < rblLen.rows.length; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
It's working on both Mozila and IE.
Thanks alot to all who tried to help.