Hello again StackOverflow peeps! = )
Now I'm trying to get the value from two textboxes into a div\p\span
So, in the first box I write some text, and in the second a number
Now, when I click the button, its supposed to take the value from box1 and then write it in the div, as many times as the value in box2.
I've gotten it to take the value from box1 to the div, but I can't get it to duplicate it with a numbervalue from box2. I removed my faulty code and whats left is just the copy value to <p> thing
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function starfire () {
document.getElementById("tekst").innerHTML = document.getElementById("boks1").value;
return true;
}
</script>
</head>
<header>
<h1>cake</h1>
</header>
<body>
<input type="text" id="boks1">
<input type="number" id="boks2">
<br>
<button type="button" id="btn" onclick="starfire()">Trykk</button>
<p id="tekst"></p>
</body>
</html>
Appreciate any help from you awesome people <3 =)
Sincerely
Gruff
function starfire () {
var boks1=document.getElementById("boks1").value;
var boks2=parseInt(document.getElementById("boks2").value);
var html="";
for (var i=1; i<=boks2; i++) {
html+=boks1;
}
document.getElementById("tekst").innerHTML = html;
}
Related
I'm trying to change the text in an h2 element with the simplest code but don't get what I'm doing wrong :
html
<h2 id="tries">Number of tries : 0</h2>
javascript
document.getElementById("tries").innerHTML = 'new text';
There is nothing wrong wiht that. You asked JS to replace the innerHTML, and JS done that.
If you want to change only the value after the ":" then here is an example where I placed a span into the the p and I change the innerHTML of this span.
function changeText(value) {
//this is the point
document.getElementById("tries-value").innerHTML = value;
}
const input = document.querySelector("input");
input.addEventListener("change", (e) => changeText(e.target.value));
changeText(input.value)
<h2 id="tries">Number of tries : <span id="tries-value">0</span></h2>
<label for="input-number">Change the input:</label>
<input id="input-number" value="10" type="number" />
I just guess you did that and as you can see, it will fail
<!doctype html>
<html>
<head>
<script>
document.getElementById("tries").innerHTML = 'new text';
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
You can first do DOM Operations if the DOM is actually loaded, so you just listen to the window.load event and it will work
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', function () {
document.getElementById("tries").innerHTML = 'new text';
});
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
I was working on variables and loop frames and stumbled across this problem. I tried switching some things around but none have succeeded. I put the code in a validator and it showed the document as valid.
Whats missing?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value
if (myValue.length == 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitute" />
</body>
</html>
Mentioning the name of a variable holding a function doesn't call the function. You have to actually call it explicitly.
This is usually done by placing () after the reference to the function.
onclick="substitute()"
I started to mess around with JS yesterday but I'm like the biggest noob ^^,
I'm trying to make a button, that can show and hide a text input box with one click.
I have used createElement("input") to create the box but can anyone help me how to use removeChild properly? =D Cause I can't get it to hide. I want to use just html and js for this
Thanks!
/gruffmeister # scotland
Here's a pure javascript example for you:
var elem = document.createElement("input");
var btn = document.createElement("button");
var txt = document.createTextNode("Hide Input");
elem.id = "hideme";
btn.appendChild(txt);
document.body.appendChild(elem);
document.body.appendChild(btn);
btn.addEventListener( 'click', function(){
var input = document.getElementById("hideme");
document.body.removeChild(input);
} );
Why not use a simple jQuery approach:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('button').click(function() {
$('p').toggle;
$("#myTextField").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<input id="myTextField" type="text" name="myTextField" value="">
</body>
</html>
So the way this code is supposed to work is like this, when I click the button I am going to add +1 to the variable antal and the second time when I press the button it should add another +1 making it 2.
Now the problem is that every time I push the button I instead get another 1 so the second time I have 11 and the third 111 I've tried everything but I cant get it right.
I can understand that there is a simple fix to this but I am quite new, thanks in advance for your answers. =)
<html>
<head>
<title>Uppgift 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script Language="JavaScript">
var antal = 0;
var $antalClick = {};
$antalClick.click = function() {
var antal = Math.round(document.getElementById("antal").value += 1);
};
</script>
</head>
<body>
<form name="formone">
<input type="button" value="resultat" onClick="$antalClick.click ();"/>
<input type="text" id="antal"/>
</form>
</body>
</html>
The problem is it is interpreting it as a string. You have to force it to be a number with parseInt()
Try
Math.round(parseInt(document.getElementById("antal").value) + 1);
I am new to Javascript. I am facing a problem with global variables. I can't figure out that why the global variables are not working as the code looks ok. Please Help me solve this problem.
I will breifly explain the code first.I have some text on a page which changes to text field when clicked. When I define the variables inside the functions body the code starts working fine. When these variables are defined globally as in the following code, the console displays this error: the variable is not defined. Here my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>
Please Help!
Thanks in Advance.
As Adam said, the issue is that you are running javascript on the document before the document has been loaded. There are a number of ways to fix this, but the simplest is to just move your javascript code to the end of the body so the document has already been parsed and is ready before your code runs like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</body>
</html>
The error is likely caused by grabbing DOM nodes before they're ready:
var textNode = document.getElementById('text');
This is likely returning either null or undefined since that DOM element hasn't been created yet.
Putting this script at the end of your body should solve your problem.
Or, if you'd like to use jQuery, you can do all this in
$(document).ready(function() {
var textNode = document.getElementById('text');
}