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...
Related
I have code like this in my website
var created = 10;
var limitacc = 25;
var element = document.querySelector(".progress-bar");
if (created.value === limitacc.value){
element.classList.add("bg-danger");
} else {
element.classList.add("bg-warning");
}
I want to change the bootstrap progress bar bg if created is same value in limitacc but the code is not working its stay in bg-warning even the created to 25
Just remove .value
var created = 10;
var limitacc = 25;
var element = document.querySelector(".progress-bar");
if (created=== limitacc){
element.classList.add("bg-danger");
} else {
element.classList.add("bg-warning");
}
I'm trying to write some code in apps script to pull text from a text box in google slides and split it by paragraphs into new text boxes and I'm hitting a snag when I get to preserving lists. I haven't been successful in finding a simple way to get the listPreset from the paragraphs in the original text box to the paragraphs in their own text boxes.
I was able to use ListStyle() methods getGlyph() and isInList() successfully but unless I make a dictionary of which listPreset each glyph is in, I don't seem to able to retrieve the listPreset with any of the listed methods which I would need in order to fill into applyListPreset().
I'd love a getListPreset() function so I could just nab that from the original list. Is there something like that I'm missing?
Here is an example "before" condition.
Here is an example of the expected "after" condition.
Here is an example of what the "after" condition is when I am unable to duplicate the listStyle from the original text box into the new text boxes.
In the following example I copy the text from the original textbox and gather various attributes from it. I attempt to input the listStyle() information into the applyListPreset() method even though I know that's wrong. I just don't know how else to get the List Preset from the original text box.
FYI I've already had a bit of help with this already so it's not all my work.
function myFunction() { // get slides in the presentation
var slides = SlidesApp.getActivePresentation().getSlides();
var numberOfLogs = 5;
for (let slide of slides) { // get the objects on each slide
splitParagraphs(slide);
}
}
function splitParagraphs(slide){
slideShapes = slide.getShapes();
for(let shape of slideShapes){
var shapetype = shape.getShapeType();
if (shapetype == "TEXT_BOX"){ // checks to see if the object is a text box
createSplitShapes(shape, slide);
shape.remove();
}
}
}
function createSplitShapes(shape, slide){
var paragraphs = shape.getText().getParagraphs();
var oldHeight = shape.getHeight();
var width = shape.getWidth();
var newShapeHeight = oldHeight / paragraphs.length;
for (let [index, paragraph] of paragraphs.entries() ){ // make a textbox for each paragraph distributed vertically over the original textbox
createParagraphShapes(shape, index, paragraph, newShapeHeight, width, slide);
}
}
function createParagraphShapes(shape, index, paragraph, shapeheight, width, slide){
var text = paragraph.getRange();
var list = text.getListStyle().isInList();
var style = text.getListStyle();
var glyph = text.getListStyle().getGlyph();
var rawText = text.asString();
var textStyle = text.getTextStyle();
var fontsize = textStyle.getFontSize();
var fontfamily = textStyle.getFontFamily();
var fontweight = textStyle.getFontWeight();
var paragraphStyle = text.getParagraphStyle();
var alignment = paragraphStyle.getParagraphAlignment();
var lineSpacing = paragraphStyle.getLineSpacing();
var indent = paragraphStyle.getIndentStart();
var shapetop = shapeheight * index + shape.getTop();
if ( ! isBlank(rawText) ) {
var t = slide.insertTextBox(rawText);
t.setLeft(shape.getLeft());
t.setTop(shapetop);
t.setWidth(width);
var newTextStyle = t.getText().getTextStyle();
newTextStyle.setFontSize(fontsize);
newTextStyle.setFontFamilyAndWeight(fontfamily, fontweight);
var newParagraphStyle = t.getText().getParagraphStyle();
newParagraphStyle.setParagraphAlignment(alignment);
newParagraphStyle.setLineSpacing(lineSpacing);
newParagraphStyle.setIndentStart(indent);
if (list = true) {
t.getText().getListStyle().applyListPreset(style);
}
}
}
function paragraphLogs(paragraph, numberOfLogs){
if(numberOfLogs > 0){
console.log("\tWhat's in paragraphs?: ");
for (var k = 0; k < paragraph.length; k++){
console.log("\t\t" + ( paragraphs[k].getRange().asString() ) );
}
}
}
function isBlank(str){
return (!str || str.trim().length === 0);
}
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.
I am pulling my hair out, trying to solve a simple problem. I know there is some math step here that I am missing and I feel like I am right on the edge of the solution but I just can't get there.
What I am trying to do is write an algorithm to fill an element with squares, and once the element is filled, resize the squares, create a new row and keep filling. Once both new rows are filled, append another row. Basically a line feed type algorithm?
So what I have so far works on the first row, but fails after that as it keeps resizing the unnecessarily.
$(function(){ //DOM Ready
//get columns of even squares
var columns = parseInt($(".grid").width()/$(".grid").height());
var rows = 1;
function checkSize(ico,index){
var grid,gridWidth,gridHeight
var icon,iconWidth,iconHeight
//get our grid info
grid = $(".grid");
gridWidth = grid.width();
gridHeight= grid.height();
//get our icon info
icon = $(ico);
iconWidth = icon.outerWidth();
iconHeight = icon.outerHeight();
//will go over columns?
if(index >= columns){
//do we need another row?
if(Math.floor(gridHeight/iconHeight) === rows){
//add row
rows++;
//reset columns
columns = gridWidth / Math.floor(gridHeight / rows);
//resize boxes
size();
};
}
};
function size(){
var grid,icon,newHeight;
grid = $(".grid");
newHeight = (grid.height()/rows)
$.each(grid.children(".icon"),function(index,value){
icon = $(value);
icon.css("height",newHeight+'px');
icon.css("width",newHeight+'px');
});
}
//fill
var counter = 0;
function fillGrid(){
var icon,grid,r,g,b,a
icon = $('<div class="icon"></div>');
//random color
r = Math.floor(Math.random()*256);
g = Math.floor(Math.random()*256);
b = Math.floor(Math.random()*256);
a = 1;
icon.css('background-color','rgba('+r+','+g+','+b+','+a+')')
grid = $(".grid");
grid.append(icon);
size(icon);
checkSize(icon,counter);
counter++;
};
var timeoutID;
function start(){
if(timeoutID){
clearInterval(timeoutID);
timeoutID = undefined;
}else{
timeoutID = window.setInterval(fillGrid, 1000);
}
};
//START THE TIMER
$('#start').on('click',start);
});
See the working example here-
http://jsbin.com/ovewib/7/edit
Any help would be greatly appreciated!
Here's the problem:
//will go over columns?
if (index >= columns) {
This is counting wrong when there is more than one row. Try this instead:
//will go over columns?
if (index >= Math.floor(columns)*rows) {
http://jsfiddle.net/mblase75/zXeHG/
I’ve got the basics of a content rotator done, the only problem is it doesn’t loop itself back to the beginning and I cannot figure out why! It is a very simple javascript script:
window.onload = function() { setInterval("transition()", 5000); }
function transition()
{
var y = document.getElementById("featured").getElementsByTagName("li");
for (var i=0;i<y.length;i++)
{
if (y[i].className == "current")
{
y[(i+1)].className = "current";
y[i].className = "";
break;
}
}
}
It keeps stopping at the end of the list, basically I just want it to loop. Any help?
You can make this a little smarter by taking advantage of the wonderful language that is Javascript:
window.onload = function() {
var y = document.getElementById('featured').getElementsByTagName('li');
var ylen = y.length, index = 0;
y[0].className = 'current';
setInterval(function() {
y[index].className = '';
index = (index + 1) % ylen;
y[index].className = 'current';
}, 5000);
};
When you pre-define the list of <li> elements like that, the function you provide for the interval timer can reference them every time the timer fires. The index variable increments up until it hits the end of the array, and then it'll be set back to zero.
try this:
if (y[i].className == "current")
{
if (y[i+1]]
y[i+1].className = "current";
else
y[0].className = "current";
y[i].className = "";
break;
}
First time you loop you set the last elements class "current". You should put something like
y[0].className = "current"
when you reach and of the loop.