Javascript Div Html contains many input - javascript

I have a DIV in Html that contains several input The idea is to create the Div dynamically with a loop for if I click on the show button it takes a little time to display it is normal since we have 300 input in the DIV but my question is what is possible to display for example the first 10 input then the other 10 and etc ... so that do not wait a time to afichher at the same time
<!DOCTYPE html>
<html>
<body>
<h2>Div </h2>
<input id="ButtonShow" type="button" value="Show" onclick="show();"/>
<div id="p1"></div>
<script>
function show()
{
for (i=0 ;i<350; i++)
{
document.getElementById("p1").innerHTML +=
"<input type='checkbox' value='Callback' checked='checked'/><br>";
}
}
</script>
</body>
</html>

I would use jQuery.
$("#p_id").append("<input type='checkbox' value='Callback' checked='checked'/><br>");
If there are still problems with slow, then you can use setTimeout:
function addCheckBox(offset)
{
$("#p_id").append("<input type='checkbox' value='Callback' checked='checked'/><br>");
if (offset < 290)
window.setTimeout(()=> addCheckBox(offset + 10), 50);
}
addCheckBox(0);

Related

Overwrite when click submit

I have a problem with my Pixel Art Maker.
Here is my HTML code:
<body>
<h1> PIXEL ART MAKER </h1>
<form class='gridForm' >
Grid Height:
<input type="number" id="gridHeight">
Grid Width:
<input type="number" id="gridWidth">
<input type="submit">
</form>
<div class='colorPicker'>Pick a color
<input type='color' name='colorCanvas'> </div>
<p class='designCanvas'>Design Canvas</p>
<table id='pixels'>
</table>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
And JS:
function makeGrid() {
$(".gridForm").submit(function(e) {
e.preventDefault();
x=$('#gridHeight').val(); // value of height
y=$('#gridWidth').val(); // value of width
for(i=0; x>i;x--){
$('#pixels').append('<tr><td></td></tr>');
}
for(j=1; y>j ;y--){
$('tr').append('<td></td>');
}
});
}
makeGrid();
Everything work as I want except 1 thing. When I choose height and width and click submit it creates the correct table form but when I choose other values and again click submit it just add new new table cells to old one. And I need new one to overwrite the old ones each time.
To clear the table, please put this in the top of the function
$('#pixels').html("");
You have used $('#pixels').append() to dynamically insert html. So it will keep on appending to what you have before. If you want to override the previous html you have its better to clear before you start anything.
function makeGrid() {
$(".gridForm").submit(function(e) {
e.preventDefault();
x=$('#gridHeight').val(); // value of height
y=$('#gridWidth').val(); // value of width
$('#pixels').html("");
$('tr').html("");
for(i=0; x>i;x--){
$('#pixels').append('<tr><td></td></tr>');
}
for(j=1; y>j ;y--){
$('tr').append('<td></td>');
}
});
}
makeGrid();

Toggle issue using input value as id

I'm trying to use jQuery's .toggle() to show and hide one of three divs. The divs have unique ids and the decision which div is got toggled is based on which of the three radio buttons has been selected. The three radio buttons have values that correspond to the ids of the divs. So if someone clicks the -1 radio, the div with the id cMB_0292_A07.m1 should be toggled.
However I'm not getting any response at all and there's no report of any errors in debugger that I've tried. What is wrong?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function showdiv(obj) {
var n = obj.name;
var v = $("input:radio[name='" + n + "']:checked").val();
alert(v);
$("#" + v).toggle();
}
</script>
</head>
<body>
<input name="cMB_0292_A07" value="cMB_0292_A07.m1" onclick="showdiv(this);" type="radio">-1
<input name="cMB_0292_A07" value="cMB_0292_A07.0" onclick="showdiv(this);" type="radio">0
<input name="cMB_0292_A07" value="cMB_0292_A07.p1" onclick="showdiv(this);" type="radio">+1
<div id="cMB_0292_A07.m1" style="display: none">minus1</div>
<div id="cMB_0292_A07.0" style="display: none">zero</div>
<div id="cMB_0292_A07.p1" style="display: none">plus1</div>
</body>
</html>
This is actually a two part issue
First off, you shouldn't have . within IDs.
Secondly, jQuery is seeing this: $('#ID.CLASS')
It is searching the DOM looking for ID: cMB_0292_A07then a child class of m1 for example.
You can fix this, by either removing the periods within your IDs, or using the regex selector [id=""].
$('[id="' + v + '"]').toggle();
jsFiddle DEMO
Other sidenotes, don't use onClick events. It's better to separate your business logic & presentation logic. Use jQuery .on('click', function () {}); events!
You cannot use ., since it will look for its child with class m1 or 0 or p1.
Check out below code snippet:
$(document).ready(function(){
$("input[type='radio']").click(function(){
alert($("#"+$(this).val()).length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">-1
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">0
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">+1
<div id="cMB_0292_A07" style="display: none">minus1</div>
<div id="cMB_0292_A07" style="display: none">zero</div>
<div id="cMB_0292_A07" style="display: none">plus1</div>

How can I make inputs display inline?

I can't seem to figure out how to display the two inputs in the following code as {display: inline} format so that they appear next to each other rather than on separate lines. I've looked at other posts and have tried jQuery, <style> tags, .setAttribute etc. in order to try and add this CSS style.
I've also tried to create a class in the HTML with the requisite display: inline command in the CSS. I created this function to open up once a button on my homepage is clicked. Everything works fine, I just want the two inputs (text and button) to line up next to each other.
Any idea of where I am going wrong? I am a beginner.
var counter = 1;
var limit = 2;
var newdiv = document.createElement('div');
function addInput(divName){
if (counter == limit) {
(counter);
}
else {
nFilter.className = 'input';
newdiv.setAttribute("style", "display: inline;");
newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]'> " + " <input type='button' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
document.getElementById(divName).appendChild(newdiv).span;
counter++;
}
}
Inputs are inline-block by default, so if there is space they will display inline, if not they will wrap to the next line. Either make sure the containing elements are wide enough to accommodate your inputs or try:
newdiv.setAttribute("style", "display: inline;white-space:nowrap;");
to stop the inputs from wrapping, note that this style is applied to the div not the inputs, you may actually want to remove display:inline;.
just using style='float:left;' for each input element
<html>
<head>
<title>this is a test</title>
<meta content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="a"></div>
<script type="text/javascript">
var counter = 1;
var limit = 2;
var newdiv = document.createElement('div');
function addInput(divName){
if (counter != limit) {
newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]' style='float:left;'> " + " <input type='button' style='float:left;' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
addInput("a");
</script>
</body>
</html>
If I get you right, then you want to display two textBoxes when a button is clicked...
You can make it pretty simple and take the document.write command.
e.g.
<body>
<input type="button" value="Click me" onClick="makeSmth()"></input>
</body>
<script>
function makeSmth() {
document.write("<br><input type='text' id='textBox01'></input>");
}
</script>
I think this link may be
handy
In that case, they resolved from the form tag, and creating a css class:
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}

Hide and show a text field

i am a beginer to javascript.I want to show a hidden textbox on a button click.i do the bellow code, but it doesnt work.
What is the problem with my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function display() {
var z = prompt("enter your name...");
if(z != null) {
document.getElementById("demo").innerHTML = "thankyou " + z + "..";
document.getElementById("case").style.visibility = 'visible';
} else {
document.getElementById("demo").innerHTML = "thankyou";
}
}
</script>
<title></title>
</head>
<body>
<p id="demo">
click on the button.....
</p><button type="button" onclick="display()">submit</button>
<form>
<input type="text" id="case" name="myText" style="display:none">
</form>
</body>
</html>
replace
document.getElementById("case").style.visibility='visible';
with
document.getElementById("case").style.display='block';
Change the style as display block instead of visibility,
document.getElementById("case").style.display='block';
or have your text box as visibility hidden instead of display:none
<input type="text" name=<name> style="visibility:hidden"/>
The following two statements will display the element with id "case":
document.getElementById("case").style.display='block';
or
document.getElementById("case").style.display='';
The following statement will hide the element with id "case":
document.getElementById("case").style.display='none';
Display:none works fine with HTML to hide a button

Adding Font + Feature to Textarea

I'm trying to create a feature for the Script Encoder that I'm creating that will increase the font size of the textarea by one. This is what I got so far:
<script type="text/javascript">
var size=10 + "px";
var size2=10;
function add(){
size2++;
size=size2+"px";
}
if(typeof size2=="undefined"){size2="10";}
$('#panel').html("<form method='post' name='pad' align='center'><textarea class='look' rows='11' id='code1' style='font-size:"+size+";' name='text' cols='58'></textarea><br></form>")
</script>
<div id="panel"></div>
<br />
<input type="button" value="Font+" name="fontAdd" onclick="add();">
The problem is that the Textarea is not showing.
I ammended your solution here:
http://jsfiddle.net/H2J9Y/2/
The only 'gotcha' is that if there is text in the textbox when the size of the text is increased, it doesn't really stay inline properly until you start typing again. You'll see what I mean, but hopefully that's solved your main problem.
Edit: A bit of padding makes the issue a lot less noticable
http://jsfiddle.net/H2J9Y/3/
Try this instead
<div id="panel"></div>
<br>
<input type="button" value="Font+" name="fontAdd" id="fontAdd">
I added an id="fontAdd" and then referenced via click()
$('#fontAdd').click(function(){
size2++;
size=size2+"px";
if(typeof size2=="undefined"){size2="10";};
$('#panel').html("<form method='post' name='pad' align='center'><textarea class='look' rows='11' id='code1' style='font-size:"+size+";' name='text' cols='58'></textarea><br></form>");
});
Also, you were missing a few ;
Example: http://jsfiddle.net/jasongennaro/n3jGK/
**Keep clicking the font + button to see the increase.

Categories