изменение переменной с подсказкой

Я работаю над учебной программой проекта odin и застрял в проекте эскиза. Назначение - создать сетку с jquery, заполнить квадраты при наведении курсора, а затем нажать кнопку, которая очистит область и даст возможность изменить # квадратов в области. В моем коде я пытаюсь изменить количество квадратов в сетке с помощью ввода из приглашения, но переменная не изменяется после ввода другого номера в приглашение.изменение переменной с подсказкой

Мой javascript-

$(document).ready(function() { 
//create table 
var area = 16; 

for(i=0;i<area;i++) { 
    $('table').append('<tr></tr>') 
}; 
for(i=0;i<area;i++) { 
    $('tr').append('<td></td>') 
}; 
//fill in background when hovered over 
$('td').hover(function() { 
    $(this).addClass('fill')  
}); 
//clear pad when button is clicked and set new area 
$('button').click(function() { 
    $('td').removeClass('fill')  
    var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16"); 
    area = input; 

}); 
});

мой html-

<!doctype html> 

<html lang="en"> 
<head> 
    <title>Skethpad</title> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 
    <button type="button">Clear Sketchpad</button> 
    <div id="container"> 
     <table> 

     </table>  
    </div> 
</body> 
</html>

Любое помогает или указатели будут оценены!

Редактирование: с помощью решения Waterscroll Я смог изменить сетку с помощью пользовательского запроса, но теперь отдельные элементы не будут заполняться, когда они зависают после запроса, но будут перед подсказкой. Есть предположения?

Edit- Исправлены все проблемы, благодаря каждой помощи! Вот как у работающих Javascript смотрели

$(document).ready(function() { 
createTable(16); 
hoverOver(); 
}); 

//create table 
var createTable = function(area) { 
    $('table').empty(); 
    for(i=0;i<area;i++) { 
     $('table').append('<tr></tr>') 
    }; 
    for(i=0;i<area;i++) { 
     $('tr').append('<td></td>') 
    };  
}; 

//fill in <td> elements when hovered over 
var hoverOver = function() { 
    $('td').hover(function() { 
     $(this).addClass('fill'); 
     console.log("filling"); 
    }); 
} 

//clear and create new table when button is clicked 
var onClick = function() { 
    $('td').removeClass('fill')  
    var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16"); 
    if (input != null) { 
     createTable(parseInt(input)); 
     hoverOver(); 
    } else { 
     createTable(16); 
     hoverOver(); 
    } 
};

источник

2015-10-30 Davez01d

Что заставляет вас думать, переменная не меняется? У вас нет кода, который перерисовывает таблицу после изменения переменной. – Barmar

'область = ParseInt (вход),' ' – Igor

Append (' ')' может быть просто 'Append (' ')' –

Вы должны выполнить код снова для того, чтобы новой области вступили в силу.

$(document).ready(function() { 

    function createTable(area) { 
     //create table 
     $('table').empty(); 

     for(i=0;i<area;i++) { 
      $('table').append('<tr></tr>') 
     }; 
     for(i=0;i<area;i++) { 
      $('tr').append('<td></td>') 
     }; 
     //fill in background when hovered over 
     $('td').hover(function() { 
      $(this).addClass('fill')  
     }); 
    } 

    createTable(16); 

//clear pad when button is clicked and set new area 
$('button').click(function() { 
    $('td').removeClass('fill')  
    var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16"); 
    createTable(parseInt(input)); 

}); 
});

источник

2015-10-30 21:45:14 Waterscroll

Спасибо ! Я смог изменить сетку с подсказкой, но теперь зависание не работает над новой сеткой, пытаясь понять, что это значит – Davez01d

Вы должны будете назвать действия на этом входе, или вы не увидите переменный обновляются в любом месте. Лучше всего это сделать, создав функцию.

/** 
    Setup the area 
*/ 
function updateArea(n){ 
    n = +n; // <-- convert string to nubmer, eg. "16" to 16 
    /** 
    Then do whatever has to be done to see the area 
    with the updated value 
    */ 
    $('#area').text(n).css({ 
    width: n, 
    height: n 
    }); 
} 


$(document).ready(function() { 
    var area = 16; 

    updateArea(area); 

    $('button').click(function() { 
     var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16"); 
     updateArea(input); 

    }); 
});

<script src='http://code.jquery.com/jquery.js'></script> 

<button type="button">Clear Sketchpad</button> 
<div id="area" style="background:gray;"></div>

источник

2015-10-30 21:41:37 Yura

Ваша логика правильная. Значение области изменяется. Тем не менее, там не хватает двух вещей.

При загрузке страницы вы создаете таблицу. Однако при нажатии кнопки вы изменяете значение Area, но никогда не создаете таблицу.
Для того, чтобы значение новой площади было эффективным, вам также необходимо очистить текущие элементы таблицы.

var area = 16;

$().ready(function() 
{ 
    drawtable(); 

$('button').click(function() { 
$('td').removeClass('fill'); 
$('table').html(""); 
var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16"); 
area = input; 
drawtable(); 
}); 
}); 

function drawtable() 
{ 
    for(i=0;i<area;i++) { 
    $('table').append('<tr></tr>') 
}; 
for(i=0;i<area;i++) { 
    $('tr').append('<td></td>') 
}; 

//fill in background when hovered over 
$('td').hover(function() { 
    $(this).addClass('fill')  
}); 
//clear pad when button is clicked and set new area 

}

http://jsfiddle.net/zpw02u89/1/

источник

2015-10-30 21:47:48 DinoMyte

изменение переменной с подсказкой

ответ

Смежные вопросы