In javascript, when I replace content of node of id="demo" by using getElementById("demo").innerHTML="SOME TEXT"; I get a strange problem that it's effect is lasting for only a few seconds. When I add a alert box for the same along with the above, the effect can be seen on background screen untill the alertbox is closed by clicking on 'OK'. Can someone suggest a solution to How I can make it remain there without getting changed untill I refresh the page ..)
Hi all,my code is a simple sort program as follows:
<script type="text/javascript">
var num=new Array(12,5,8,23,1);
var len;
function sort(){
len= num.length;
for(i=0; i<len-1; i++){
for(j=0; j<len-i; j++){
if(num[j]>num[j+1]){
var tem=num[j];
num[j]= num[j+1];
num[j+1]= tem;
}
}
}
var x=document.getElementById("demo");
x.innerHTML=num;
alert(num);
}
</script> <form>
<p id="demo">Click the button</p>
<input type="submit" onclick="sort();" value="Click"></input>
</form>
check this link dude
http://jsfiddle.net/QXe7K/1/
the code is
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>
Related
<!DOCTYPE html>
<html>
<head>
<title>WhiteList</title>
</head>
<body>
<h1>Hello stranger lets see if you are on the list!!</h1>
<input id="1" value="type here" placeholder="type here">
<button onclick="click()">Check</button>
<br>
<p id=stuff></p>
<script type="text/javascript">
function click(){
var name = document.getElementById('1').value;
if (name == "tijmen"){
document.getElementById("stuff").innerHTML = "<p>hey you are on the list welcome</p>"
} else{
document.getElementById("stuff").innerHTML = "<p>sorry you are not on the list</p>"
}
}
</script>
</body>
</html>
so this is the code, there are no errors. but the problem is that the text won't print when i insert my name and click the button.... i realy cant seem to find the problem.
Try add onclick to the JavaScript:
<body>
<h1>Hello stranger lets see if you are on the list!!</h1>
<input id="1" value="type here" placeholder="type here">
<button id="btn">Check</button>
<br>
<p id=stuff></p>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
var name = document.getElementById('1').value;
if (name === "tijmen"){
document.getElementById("stuff").innerHTML = "<p>hey you are on the list welcome</p>"
} else {
document.getElementById("stuff").innerHTML = "<p>sorry you are not on the list</p>"
}
}
</script>
</body>
Problem here is click is defined as a click action so the engine is thinking you are calling the click of the button. Simple test shows what the browser sees.
<button onclick="console.log(click)">Check</button>
What can you do? Change the name, or even better, use addEventListener to bind the event listener.
Disclaimer: I am not looking for someone to code this for me just some pointers to help me fix this problem :)
I have the following web page that allows me to add fields dynamically to a form. The current page works. What I want to do is figure out how to make the javascript at the bottom of the page more generic. example I want to pass the templet id and the target id to the function without hard coding the templet id and the target id into the script. Here is the code that I have and works just fine.
I want to make the morefields function so that I can reuse. I want to pass to the function the template and the target. example function moreFields ( templete, target). this way I can use the same function without editing over and over in different web pages. if you look in to the moreFields function you will see that it is hard coded for "readroot" and "writeroot" I want to change the function so it will take parameters and do the same thing it is doing now.
<HTML>
<HEAD>
<META NAME="generator" CONTENT=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">
<TITLE></TITLE>
<STYLE TYPE="text/css">
div.c1 {display: none}
</STYLE>
</HEAD>
<BODY >
<DIV ID="readroot" CLASS="c1">
Variable Name <INPUT NAME="VarName"><BR>
</DIV>
<FORM METHOD="post" ACTION="/cgi-bin/show_params.cgi">
Function Name: <INPUT NAME="CFunction"> <BR>
Function Alias: <INPUT NAME="AFunction"><BR>
<BR>
<SPAN ID="writeroot"></SPAN>
Function return: <INPUT NAME="AFunction"><BR>
<INPUT TYPE="button" ID="AddMoreFields" VALUE="Give me more fields!" ONCLICK= "moreFields()"> <INPUT TYPE="submit" VALUE="Send form">
</FORM>
<SCRIPT >
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById("readroot").cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById("writeroot");
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields()
</SCRIPT>
</BODY>
</HTML>
<body>
<header>
</header>
<nav>
<div class="table" id="div1" >
</div>
<br>
<br>
<br>
<div class="boxes" id="boxes">
<input type="text" maxlength="2" name="value" id='value' />
<input type="text" maxlength="2" name="value2" id='value2' />
<input type="button" value="submit" onclick="size()" />
</div>
</nav>
</body>
So basically when i write this window.onload = function() {beggining1(10,10);};
everything works ok, when page loads 10 rows and 10 columns of buttons are made.
But now i want instead on pageload ,I want to make the buttons from a button which recieves columns and rows properties from 2 text boxes.<input type="button" value="submit" onclick="size()" />
<script type="text/javascript">
var rows = getElementById('value');
var columns = getElementById('value2');
window.onload = function() {beggining1(10,10);};
function size(){
beggining1(rows,columns);
}
function beggining1(k,l){
for (i=1;i<k;i++){
for (j=1;j<l;j++){
var btn = document.createElement("BUTTON");
btn.className = "button1";
btn.style.cssText = 'background:green;height:50px;width:50px;margin:5px;';
var t = document.createTextNode(i+"_"+j);
btn.appendChild(t);
document.getElementById("div1").appendChild(btn);
document.getElementById('div1').addEventListener('click' , reserve);
}
document.getElementById('div1').appendChild(document.createElement("br"));
}
}
</script>
I dont know whats wrong in my code and im trying to understand but i can't i guess its something stupid i miss.
Replace size function with the updated one mentioned below and remove window.load handler as now you want to generate when user click on button,
I return false from the size() function because if the button is in form tag it would submit the form and postback the page.
<script type="text/javascript">
function size(){
var rows = document.getElementById("value").value;
var columns = document.getElementById("value2").value;
beggining1(rows,columns);
return false;
}
function beggining1(k,l){
for (i=1;i<k;i++){
for (j=1;j<l;j++){
var btn = document.createElement("BUTTON");
btn.className = "button1";
btn.style.cssText = 'background:green;height:50px;width:50px;margin:5px;';
var t = document.createTextNode(i+"_"+j);
btn.appendChild(t);
document.getElementById("div1").appendChild(btn);
document.getElementById('div1').addEventListener('click' , reserve);
}
document.getElementById('div1').appendChild(document.createElement("br"));
}
}
</script>
<html>
<title>
</title>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
function AddingTextBoxes(){
var NumOfText=$("#NumOfTextBoxes").val();
$('#NewlyCreatedSelectBoxes').empty();
for(i=1; i<=NumOfText; i++){
var ipBoxName="MyInput"+i;
var txtBoxAutoNumbering="<input type='text' name='textbx[]' style='width:50px;' value="+i+" /> ";
$('#NewlyCreatedSelectBoxes').append(txtBoxAutoNumbering);
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
var Select_SelectionOptions="<select id='SelectOption'><option>Text_Box</option> <option>Text_Area</option><option>Radio_Button</option></select> ";
$('#NewlyCreatedSelectBoxes').append(Select_SelectionOptions);
var Select_For_Multiple_Choices="<button type='button' onclick='ChildTxtBoxes()' id='ABC'>Click for child selections</button><br><br>";
$('#NewlyCreatedSelectBoxes').append(Select_For_Multiple_Choices);
}
return false;
/*for(var i=0; i<NumOfText; i++){
var x=1;
NewlyCreatedSelectBoxes.innerHTML=NewlyCreatedSelectBoxes.innerHTML+"<br>AAA "+x+"<input type='text' name='mytext'/>";
x++;
}
return false;*/
}
function ChildTxtBoxes(){
var txtBox="<input type='text' name='textbx[]'/> "
$('#NewlyCreatedSelectBoxes').append(txtBox);
}
</script>
</head>
<body>
<form >
<div id="PHPForms" >
<!--Designing PHP forms dynamically-->
<label>Form Heading</label><input type="text"/><br><br>
<label>Number of text boxes would needed</label><input id="NumOfTextBoxes" type="text"/>
<button id="A" onclick=" return AddingTextBoxes()">Click</button>
<div id="NewlyCreatedSelectBoxes" name="Texty">
</div>
</div>
</form>
</body>
</html>
In this code once I clicked button related to "var Select_For_Multiple_Choices" variable, I shold display a text-box right below the clicked button.. Likewise whenever the button is the text-box should be shown below that button... Bt in my code though it creates a text-box it shows aftr all the text boxes.... Hw I can do this?
You can use .after() to insert after the found element. So something like this:
$(button).after(content);
You can get your code to work as expected by passing the execution context (this) to the function ChildTxtBoxes like: ChildTxtBoxes(this). You have to modify your function to:
function ChildTxtBoxes(button) {
var txtBox = "<input type='text' name='textbx[]'/>"
$(button).after(txtBox);
}
notice the use of the execution context(this) to identify the button that was clicked and the use of .after() to insert a textbox after the button as Vlad suggested.
To be honest, I don't fully understand the keyword this to explain how and why it works. You can read up more on JavaScript “this” keyword here
Here is a working demo
I have 2 textBox and 1 button!
I want to insert text to one of these textboxs. When I click to textbox_1 and click button, mytext will appear at textbox_1. When I click to textbox_2 and click button, mytext will appear at textbox_2.
How can I do this by using JavaScript?
Please help me! I'm new on JavaScript!
put id's of the two textboxes as textbox_1 and textbox_2 and put onclick='onCLickButton();' on the <button> tag
and write the following code in the script
var text_to_be_inserted = "sample";
function onCLickButton(){
document.getElementById("textbox_1").value='';
document.getElementById("textbox_2").value='';
if(document.getElementById("textbox_1").focused){
document.getElementById("textbox_1").value=text_to_be_inserted;
}
else if(document.getElementById("textbox_2").focused){
document.getElementById("textbox_2").value=text_to_be_inserted;
}
else{
// do nothing
}
}
Edited
Please accept my apologies actually I am used to use these functions as I have my own js file having these functions.
please add onfocus='onFocusInput(this);' in the <input> tags and add the following code in the script
function onFocusInput(object){
document.getElementById("textbox_1").focused=false;
document.getElementById("textbox_2").focused=false;
object.focused = true;
}
<html>
<head>
<script type="text/javascript">
var index = false;
var text = "This text shifts to text box when clicked the button";
function DisplayText(){
if(!index){
document.getElementById("txt1").value = text;
document.getElementById("txt2").value = "";
}
else{
document.getElementById("txt2").value = text;
document.getElementById("txt1").value = "";
}
index = index ? false : true;
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="Change Text" onclick="DisplayText()"/>
</body>
</html>
Take a look at the onFocus() attribute for the INPUT tag - and think about keeping track of what was last given the focus. I'm being a little vague as this sounds a lot like homework.
It isn't the prettiest / most delicate solution, but it works and you can build off it to fulfill your needs.
<script>
var field = 0;
function addText(txt){
if(field === 0) return false;
field.value = txt;
}
</script>
For a form such as
<form>
<input type="text" name="box1" id="box1" onfocus="field=this;" />
<input type="text" name="box2" id="box2" onfocus="field=this;" />
<input type="button" onclick="addText('Hello Thar!');" />
</form>