I learn javascript and I have problem. I trying put function results into a div by click on button.
<script type="text/javascript">
function choinka() {
var x=document.getElementById("liczba").value;
var a="W";
var b="W";
var px="15"
for(j=1;j<=x;j++)
{
for(i=j;i<=x;i++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<span style='color:green;background:green;line-height:" + px + "px;'>" + b + "</span>");
b+="WW";
for(k=j;k<=x;k++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<br />");
}
for(k=1;k<=x/2;k++)
{
for(m=1;m<=x;m++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
b="W";
document.write("<span style='color:brown;background:brown;line-height:" + px + "px;'>" + b + "</span>");
for(m=1;m<=x;m++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<br />");
}
}
</script>
and body contain:
<p>Wielkość: <input type="text" id="liczba" /><input type="submit" value="Rysuj" onclick="choinka()" /></p>
<div id="choinka"></div>
How put results of function choinka() by clicking button into the div#choinka?
Here is a working code. Some notes:
you are writing to document using document.write() (which is not a good habit). It's more efficient to contatenate the html in a variable and then set the innerHTML property of the element div#
your loops were not working. the second parameter is the condition of the loop so you ahve to write j <= x.length and not j <= x
Here is a working example on jsfiddle (merry christmas ;-))
function choinka() {
var x = document.getElementById("liczba").value;
var a = "W";
var b = "W";
var px = "15";
var html = '';
for (j = 1; j <= x.length; j++) {
for (i = j; i <= x.length; i++) {
html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
}
html += "<span style='color:green;background:green;line-height:" + px + "px;'>" + b + "</span>"
b += "WW";
for (k = j; k <= x.length; k++) {
html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
}
html += "<br />";
}
for (k = 1; k <= x.length / 2; k++) {
for (m = 1; m <= x.length; m++) {
html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
}
b = "W";
html += "<span style='color:brown;background:brown;line-height:" + px + "px;'>" + b + "</span>";
for (m = 1; m <= x.length; m++) {
html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
}
html += "<br />";
}
document.getElementById('choinka').innerHTML = html;
}
Related
I have a todo site with edit mode and view mode. Full code is at https://repl.it/#UCYT5040/Notekeeper, but this is the JS I am having an issue with.
let editMode = true;
let items = 1
function toggleEditMode() {
console.log(editMode)
if (editMode == true) {
editMode = false;
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
}
} else {
editMode = true
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "></input>"
}
}
}
This ends up with
`<div id="item1">
<input type="text" id="itemTitle1" value="New Note">
</h1>
</div>`,
but it should be
`<div id="item1">
<input type="text" id="itemTitle1" value="New Note"></input>.
</div>`.
These are void elements(<input>). This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have — a closing tag in HTML.
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "/>"
i create new hours calendar. as per the IMAGE1 when user click on any of div that dynamic Span was created up to 8 hours.
i.e. if click on 00:00 its design up to 08:00 hours
so my question is how to get that specific siblings 8th divs child position.
Or any other way please suggest me.
$(this).eq(+8).attr("id");
IMAGE1
Table Design Code when ajax return Success:
$(r.emp_nm).each(function (index) {
tabelBody += "<tr><td style='width:10%'><div class='col-xs-3 col-md-3 on-break-tab'>" + this.fname.charAt(0) + this.lname.charAt(0) + "</div>" + this.fname + ' ' + this.lname + " </td>";
for (var i = 0; i < 24; i++) {
var tabelsubBody = "";
var p = 15;
var t_id = r.hours[i];
for (var j = 0; j < 4; j++) {
tabelsubBody += "<div style='float:left; width:25%;height:inherit;' class='Dropablesub_td' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "_" + j + "'></div>";
}
if (i === 23) {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td></tr>";
} else {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td>";
}
}
});
$("#tabelBody").html(tabelBody);
$("#tdDate").html(r.today);
$("#SelectDate").val(r.today);
$("#currentSelect").val("Days");
Events();
And Events() is :
function Events() {
$("body").on("click", ".Dropablesub_td", function () {
var hidid = $(this).attr("id");
var Myleft = $(this).position().left;
var Mytop = $(this).position().top;
alert($(this).eq(+8).attr("id"));
$(this).append("<span id='" + hidid + "' class='divId label label-success ui-widget-content filediv unselectable' >ABCDEFGHIJKLMNOPQRSTUVWXYZ<span>");
$(this).children(
).css({zIndex: 999, position: "absolute", top: Mytop, left: Myleft, width: '40%', display: "block", border: "#808080 solid 2px", color: "black", background: "#00CEB4"});
});
}
You can get the desired element using .index() of current element and then using .eq() to target the next element.
Here in the snippet I have created a pseudo code for demonstration
$(document).on("click", ".dropabletd", function() {
var tr = $(this).closest('tr');
var tds = tr.find('td');
var index = tds.index(this);
var sibling = tds.eq(index + 8);
console.log($(this).attr('id'), sibling.attr('id'));
});
createTable();
function createTable() {
var tabelBody = ""
for (var i = 0; i <= 23; i++) {
tabelBody += "<td class='dropabletd' id='id" + i + "'>" + i + "</td>";
}
$("table tr").html(tabelBody);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr></tr>
</table>
i have a board that contains 9 small boards and each small board contains 9 cells (Ultimate TicTacToe).
i'm trying to use the click function and print "x" on the clicked button but it doesnt change the text of the button and i dont have an idea why.
please help me.
here is the code:
<script>
var bigTable = "<table align='center' value='bigBoard' border='0' cellpadding='1' cellspacing='1'\><tbody>";
for (var k = 0; k < 9; k++)
{
if (k % 3 === 0)
{
bigTable += "<tr>";
}
bigTable += "<td>";
var mytable = "<table value='smallBoard'+k border='1' cellpadding='1' cellspacing='1'><tbody><tr>";
for (var j = 0; j < 3; j++)
{
for (var i = 0; i < 3; i++)
{
var position = +k + "," + j + "," + i;
mytable += "<td><button class='a' id=" + position + " type='submit' name=" + position + "></button</td>";
}
mytable += "</tr><tr>";
}
mytable += "</tr></tbody></table>";
bigTable += mytable + "</td>";
if (k % 3 === 2)
{
bigTable += "</tr>";
}
}
bigTable += "</tbody></table>";
document.write(bigTable);
</script>
<script>
$(document).ready(function() {
$(".a").click(function() {
var buttonPressed = $(this).attr("id");
jQuery.ajax({
data:buttonPressed,
url:"board",
success: function(responseText){
//alert("acac" + buttonPressed);
$("#" + buttonPressed).text(responseText);
}
});
});
});
</script>
This is what you are doing wrong, change this:
var position = +k + "," + j + "," + i;
to something like,
var position = +k + "-" + j + "-" + i;
Change the type of button from submit to button because you are calling Ajax request, not submitting the form.
I ran this jsfiddle and it works fine
Try it
http://jsfiddle.net/P8wrb/1/
Just declare a variable for your clicked button and then set the .text for it by reference
$(".a").click(function() {
var that = $(this);
....
that.text('X');
}
for (var i = 0; i < 20; i++) {
rand = Math.floor(Math.random() * jewels.length)
html += '<div class="Card1 ' + jewels[rand] + '" id="ship' + i + '" style="top:72px; left:245px;" ></div>'
jewels.splice(rand, 1);
}
for (var i = 0; i < 4; i++) {
html += '<div class="Card2" id="stac' + i + '" style="top:' + (135 + (i * 13)) + 'px; left:245px;" ></div>'
}
$('.Card1').click(function () {
});
when I click in card1 class I want to show random 4 items(out of 20) in class card2?
Hi I have been working on this code that creates a table with radio buttons for each word. Currently that works perfectly, however I am not making an on click function on the radio button and submit. They both get to the function being called when clicked, but once in the function and i call getElementById to validate or change color the ID is not found or at least thats what I assume because after putting an alert, nothing appears.
I am relatively new at javascript so any advice would help. I was told it might be because they are being called before created but from what I can see in my code thats not the case. Any suggestions?
edit:
This is the code from where trouble arises. Only the spanish once has the on click on it. Didn't put the submit validate because i figured they are the same problem
for (i = 0; i < sentences.length; i++) {
document.write('<p><a onclick ="javascript:ShowHide(\'Sentence' + (i + 1) + '\')" href="javascript:;"><font color="#0000FF"><u>Sentence' + (i + 1) + '</u></font></a></p>');
document.write('<table style="display: none; table-layout: fixed" id="Sentence' + (i + 1) + '" border = "1">');
writeSentence(i, words, "Sentences");
document.write('</table>');
document.write('<input type="checkbox" name="Sentence_lang ' + (i + 1) + '" id = "Sentence_lang ' + (i + 1) + '" value="All_English" /> All English ');
document.write('<input type="checkbox" name="Sentence_lang ' + (i + 1) + '" id = "Sentence_lang ' + (i + 1) + '" value="All_Spanish" /> All Spanish <br />');
}
document.write('</p>')
function writeSentence(i, array, name) {
var Name = name;
document.write('<tr>');
document.write('<td>');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
var word = array[i][j];
document.write('<td>');
if (Name == "Sentences") document.write('<span class="kept" id="word_' + i + '_' + j + '">');
document.write(word);
if (Name == "Sentences") document.write('</span> ');
document.write('</td>');
}
document.write('</tr>');
document.write('<td>');
document.write('English');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" name="' + Name + (i + 1) + '_' + (j) + '" id="Eng_' + (i + 1) + '_' + (j) + '" value="English" >');
document.write('</td>');
}
document.write('</tr>');
document.write('<tr>');
document.write('<td>');
document.write('Spanish');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" onclick = "color(' + i + ',' + j')" name="' + Name + (i + 1) + '_' + (j) + '" id="Spa_' + (i + 1) + '_' + (j) + '" value="Spanish"> ');
document.write('</td>');
}
document.write('</tr>');
document.write('<tr>');
document.write('<td>');
document.write('Other');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" name="' + Name + (i + 1) + '_' + (j) + '" id="Other_' + (i + 1) + '_' + (j) + '" value="other" > ');
document.write('</td>');
}
document.write('</tr>');
if (Name == "Sentences") for (j = 0; j < array[i].length; j++)
document.write('<input type="radio" input style= "display: none" name="' + Name + (i + 1) + '_' + (j) + '" id="' + Name + (i + 1) + '_' + (j) + '" value="Norm" checked>');
}
function color(i, j,lang) {
var word = document.getElementById('word_' + i + '_' + j + '');
aleart(word);
if (lang == "Spa") word.className = "blue";
}
edit the last if statement is what I'm trying to do. The third parameters is currently empty because i could not figure out how to pass the string Spa properly. But i can go around that if needed.
You've got a typo: aleart(word);, the error should be visible in your console. Change it to alert(word); and the alert box should appear.
Apart from that, you should not use document.write. It won't work once the document is loaded. See Alternatives to document.write or What are alternatives to document.write?