I am trying to set up some code, where the user can enter a number into a <textartea> and click a button, which will set the font size of another <textarea> by editing the Styleattribute. I tried the following:
<h2>Set Font</h2>
<textarea id='input'></textarea>
<button onclick ="myFunction()">Click</button>
<textarea id='MainText' style="font-size:18px;"></textarea>
<script>
function myFunction(){
var InputValue = document.getElementById('input').value;
document.getElementById('MainText').style.font-size = 'InputValue';
alert('Font Size Changed to ${InputValue}')
}
I am not sure what to do.
some syntax errors here. You are using JS to do this so you need to camelCase fontSize. Also, you are assigning it to a String when you should be assigning it to the variable name so get rid of those quotes. Also, you are interpolating the variable incorrectly in your alert:
alert('Font Size Changed to ${InputValue}') You need to use backticks for this, not single quotes
var InputValue = document.getElementById('input').value;
document.getElementById('MainText').style.font-size = 'InputValue';
should be:
var inputValue = document.getElementById('input').value;
document.getElementById('MainText').style.fontSize = inputValue + 'px';
you should use fontSize instead of font-size and inputValue as variable not string
e.g
document.getElementById('MainText').style.fontSize = inputValue + 'px';
Related
I'm building a donate modal.
When I click on the donate button, the progress bar gets incremented based on the input value.
I want to replace the money string from h1 when I click on donate.
So if the input value is 10, when I click on the donate button the h1 should read:
$140 is still needed for this project
This runs only once, because it replaces the text only when it finds '$150'.
.modal
.modal-header-box
h1 $150 is still needed for this project
.modal-content
progress#myProgress(value='50', max='200')
h1 Only days left to fund this project. Join the other 42 other donors who have already suppoorted this project. Every dollar helps.
input(type='number', placeholder='$' id='value', max='100')
button#btn Give Now
.button.save-later Save for later
.button.social Tell your friends
JavaScript
document.getElementById('btn').addEventListener('click', function() {
var x = document.getElementById('myProgress');
console.log(x.value, document.getElementById('value').value)
x.value = +x.value + +document.getElementById('value').value;
let difference = x.max - x.value;
console.log(difference);
document.body.innerHTML = document.body.innerHTML.replace('$150', `${difference}`);
});
Is there any way to make this more dynamic, so the string will update If click on the donate button multiple times?
CodePen link
https://codepen.io/make96/pen/XWZdbPZ
Your problem resides in replacing everything on the page. You should restrict the transformation to the elements that you are changing.
Instead of replacing document.body, then target the modal header box instead.
document.body.innerHTML = document.body.innerHTML.replace('$150', `${difference}`);
Replace the modal-header-box content instead.
document.getElementsByClassName("modal-header-box")[0].innerHTML = `<h1>$${difference} is still needed for this project</h1>`;
Just put the number in a span and only change the span input on every click.
You take the value of the span and the value of the input box and substract it everytime you click on it.
Function:
document.getElementById("btn").onclick = function(){
var value = parseInt(document.getElementById("test").innerHTML);
var donate = parseInt(document.getElementById("value").value);
document.getElementById("myProgress").value += donate;
document.getElementById("test").innerHTML = value-donate;
}
modal-header-box
.modal-header-box
h1 $<span id="test">150</span> is still needed for this project
Don't replace the document body, Not good practice to update the body every time, update only the required field.
Javascript
document.getElementById("btn").addEventListener("click", function() {
const title = document.getElementById("title");
const x = document.getElementById("myProgress");
const prev = +x.value
x.value = prev + +document.getElementById("value").value;
let difference = x.max - x.value;
title.innerHTML = title.innerText.replace(x.max - prev, `${difference}`);
});
Template
h1#title $150 is still needed for this project
Can someone please let me know if it is possible to pass a variable inside a "setAttribute" to make an input value appear in an href link?
For example I have :
var inputNumber = document.getElementById('inputNumber').value;
var validateBtn = document.getElementsByTagName("a"); //a surrounding n button
var linkValidation = validateBtn[0].href = ("https://checkyournumber.com.action?inputNumber=" + inputNumber );
so far so good, if i console.log linkValidation, i do have the full link with the input number at the end as intended.
However when i try to set the href attribute to the a tag in the html using the below :
document.getElementsByTagName("a")[0].setAttribute("href", "https://checkyournumber.com.action?inputNumber=" + inputNumber );
Then the link the user is taken to is : https://checkyournumber.com.action?inputNumber=
I have tried entering inputNumber inside the "" but then of course it is displayed as such in the URL. I have tried with '' instead... no luck.
Would someone know if it is possible at all?
Thank you very much for your support in advance!
Try as follows
(function() {
var inputNumber = document.getElementById('inputNumber').value;
var validateBtn = document.getElementsByTagName("a"); //a surrounding n button
var linkValidation = validateBtn[0].href = ("https://checkyournumber.com.action?inputNumber=" + inputNumber );
});
I am Creating one input box dynamically using javascript
Below is the Code:
var addtxt = document.createElement("input");
addtxt.type = "text";
addtxt.name = "admissionno" ;
addtxt.id = "admissionno" ;
If i add value in static way it will take using addtxt.value="11";
But am adding like this dynamically
addtxt.value=result.studentlist[j].admissionno
it will not work.please give me the idea its helpful for me.
Try this:
document.getElementById("admissionno").value = (result.studentlist[j].admissionno);
I get a Css value with JQuery ,regarding the background position of specific element,-66px -65px
I want get the second value("-65px")and change that to '170px' with jquery ;
How to subString that and replace now value?
by your case
// replace body selector with your element selector
var bgPos = $('body').css('backgroundPosition');
$('body').css('backgroundPosition', bgPos.replace('-65px', '170px'));
with jquery you can do something like this...
$('#elementid').css('background-position-x', newValueX);
$('#elementid').css('background-position-y', newValueY);
also you can get the values
$('#elementid').css('background-position-x');
$('#elementid').css('background-position-y');
I think you should try to use 'background-position' css property. It would make your life a bit simpler.
here is the fiddle
var bg = $('#some_el').css('background-position');
var values = bg.split(" ");
var X = values[0].split("px")[0];
var Y = values[1].split('px')[0]);
I am making a plugin for form validation as practice, but for some reason after I create a h2 element and try to set it's attribute, it is not working. Here is the code
var testing = function(regex, value, error_msg, error_msg_field_id){
var pattern = new RegExp(regex);
if (!pattern.test(value)){
var ele = document.createElement("H2");
var node = document.createTextNode(error_msg);
ele.setAttribute('style', 'color:white');
alert("hi");
jQuery(error_msg_field_id).append(node);
}
}
the text appears with no problem, but it is not in white color. This make no sense at all to me
You are using setAttribute correctly, but you are setting the property on your h2-element, which is never actually inserted in your DOM.
You can change and simplify the relevant section of your code to:
var ele = document.createElement("H2");
ele.textContent = error_msg;
ele.setAttribute('style', 'color:white');
jQuery(error_msg_field_id).append(ele);
The usage of jQuery here is also not necessary. You can simply use
document.querySelector("#" + error_msg_field_id).appendChild(ele);
which is equally simple.