How to use text option to change button URL [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Trying to create a dynamic donation button using input text. Essentially, enter the amount to donate and click the button. The amount entered should be updating the button URL but nothing happens. I'm sure I am missing something obvious but none of the available solutions here have worked (I tried 7). Thanks.
document.getElementById("input-custom-donation").onchange = function() {
document.getElementById("donate-button").href = "https://securepayments.cardpointe.com/pay?details=Donation|30|"+this.value+";
}
<label for="input-custom-donation">Enter Custom Donation Amount (numbers only):</label>
<input id="input-custom-donation" type="text" name="input-custom-donation">
<br>
<br>
<a class="button" id="donate-button" href="http://test/">Donate Now</a>

There's a typo, an exceeding double quote at the end.
document.getElementById("donate-button").href = "https://securepayments.cardpointe.com/pay?details=Donation|30|" + this.value;
Just as a reminder, you can always use string interpolations to make string more readable, here's an example:
document.getElementById("donate-button").href = `https://securepayments.cardpointe.com/pay?details=Donation|30|${this.value}`

use href to set link of anchor tag
let btn = document.getElementById("donate-btn");
let amount = document.getElementById("value");
let link = document.getElementById("link");
const baseLink="www.google.com/donate?amount="
const makeLink=(amount)=>{
return baseLink+amount
}
function amountChange(e) {
btn.innerText = `Donate Me ${amount.value}$`
link.href=makeLink(amount.value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input onchange={amountChange()} id="value" type="number" />
<button id="donate-btn"> Donate Me </button>
<a id="link" href="www.google.com/donate?amount=0" > Link To Donate </a>
</body>
</html>

Related

getElementById seems to fail within forms [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have been having problems with getting getElementById working on a specific webpage. So, I've cut it down the following minimal code. In this code, first alert() is displayed, but the second one is not, and about the only thing I can guess why is getElementById() is failing. Any ideas?
<!doctype html>
<html>
<head>
<script type="text/javascript">
function Process(X) {
alert("In Process at A");
var y = Document.getElementById("YourName").value;
alert("At B");
}
</script>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div>
<form onsubmit="Process(getElementById('YourName').value);return false;">
<label for="name">Your name</label>
<input type="text" maxlength="50" name="YourName" id="YourName">
<input type="submit" value="Do it" />
</form>
</div>
</body>
</html>
Document.getElementById fails because getElementById is a property of the document object not the Document object. JS is case-sensitive.
getElementById('YourName') fails because getElementById is a property of the document object and is not a global.

THE COUNTER CREATED USING JAVASCRIPT NOT WORKING [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<script>
let counter= 0;
function count() {
counter++;
document.querySelector('#counter').innerHTML= counter;
}
</script>
<title>My Webpage</title>
</head>
<body>
<h1 id="counter">0</h1>
<button onlclick="count()">Click Here!</button>
</body>
</html>
when i am running it on internet explorer and also on an online IDE for html the page displays 0 and click here but when i click on the button the page remains the same and the 0 not changes to 1.
Please help what changes can i make
You have a typo in onclick, here is the working version.
let counter = 0;
function count() {
counter++;
document.querySelector('#counter').innerHTML = counter;
}
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1 id="counter">0</h1>
<button onclick="count()">Click Here!</button>
</body>
</html>

HTML/JS site does not update html when using javascript [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I really don't know what I am doing wrong but my site just won't update the .innerHtml of the heading. There is no error in the browser console and console.log() returns the right string ("hhh").
Both elements with id = test and teet won't update their html
<html>
<head>
<title>
test title
</title>
</head>
<body>
<h1 id="teet">TEST HEADING</h1>
Search :
<input id="input">
<button onclick="load()" id="submit" type="button"> search </button>
<br>
<h1 id="test"> Test</h1>
<script>
function load() {
var test = document.getElementById("test").innerHtml = "hhh";
console.log(test);
}
</script>
</body>
</html>
It's innerHTML with capital letters

To Do list in HTML/Javascript/jQuery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to make a to do list in Javascript / HTML5. Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To Do </title>
<link rel="stylesheet" href="todolist.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="To Do.js"></script>
</head>
<body>
<div id="list">
</div>
<form id="to_do_list">
<h2>What do you want to do? </h2>
<input type="text" id="task" name="task"><br>
<br/>
<button type="button" id="addToList"> Add to List </button> <br/>
</form>
</body>
</html>
I'm trying to figure out how to work Javascript that will form a list with the user's entries.
Sorry if this is easy, I am new to this.
JavaScript
window.onload = function () {
$("addToList").onclick = addTask;
}
var addTask = function() {
alert("You clicked it!");
}
You need to decide whether to use JQuery or Javascript for your script section.
It looks you have used Javascript, then switched to JQuery to reference an object then went back to Javascript. Try to stick to just one.
<script>
// this could be $(window).ready(function() { ...
window.onload = function () {
$("#addToList").click(addTask); // you need to point at the id #addToList
}
var addTask = function() {
var task = $("#task").val(); // references the value inside #task
$("#list").append("<p>"+task+"</p>") // makes a new <p> element
$("#task").val(""); // empties out #task
}
</script>
I'm not really sure what you're looking for, but this does what I think you want.
Also, I don't think you should use spaces in filenames ("To do.js")

How do I get the value of math.random and test it in an if statement? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
EDIT Here is new code but it is still not working for me.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<script src="myjavascript2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button onclick="myFunction()">Play</button>
<p id="test"></p>
</body>
</html>
Javascript:
var things = ['rock','paper','scissors'];
function myFunction() {
var i = Math.floor(Math.random()*things.length));
document.getElementById("test"+(i+1)).innerHTML=things[i];
}
I added this text so that it would let me post the edit, please ignore this.
You could simply replace your whole code with
var things = ['rock','paper','scissors'];
var i = Math.floor((Math.random()*things.length));
document.getElementById("test").innerHTML=things[i];
This would also let you more easily deal with other operations, like finding a winner.

Categories