Sida 1 av 1
Lite hjälp med Javascript
Postat: 24 februari 2022, 23:10:52
av SeniorLemuren
Denna exempelkod ändrar fontstorleken på den fasta text som ligger mellan p...p. Jag vill i stället mata in texten i en input i stället för den fasta texten. Det var hundra år sedan jag pulade med Javascript och minnet har blivit kortare i min ålder. Kan någon ge mig ett förslag på hur man gör?
Kod: Markera allt
<!DOCTYPE html>
<html>
<body>
<center>
<br /><br />
<div style="padding: 20px; margin: 50px;
font-size: 20px; border: 5px solid green;" id="container" class="container">
<p>
Denna text vill jag ersätta med texten i ett inputfält. Det var hundra år sedan jag pulade med Javascript och minnet är kort i min ålder.
</p>
</div>
<div>
<h2>Change Font Size</h2>
</div>
<input type="range" min="10" max="30" id="slider" onchange="changeSizeBySlider()" value="20" />
</center>
</body>
</html>
<script>
var cont = document.getElementById("container");
function changeSizeBySlider() {
var slider = document.getElementById("slider");
// Set slider value as fontSize
cont.style.fontSize = slider.value + "px";
}
</script>
Re: Lite hjälp med Javascript
Postat: 25 februari 2022, 06:38:08
av MattisLind
Re: Lite hjälp med Javascript
Postat: 25 februari 2022, 08:46:49
av SeniorLemuren
Inte riktigt, men efter lite sömn så löste jag det själv. Det var inte så svårt när man var utvilad i skallen. Allt verkar vara mer komplicerat mitt i natten.
Så här blev det.
Kod: Markera allt
<!DOCTYPE html>
<html>
<body>
<div>
<center>
<br /><br />
<input type="text" id="container" onchange="changeSizeBySlider()">
</div>
</center>
<div>
<h2>Change Font Size</h2>
</div>
<input type="range" min="10" max="30" id="slider" onchange="changeSizeBySlider()" value="20" />
</center>
</body>
</html>
<script>
var cont = document.getElementById("container");
function changeSizeBySlider() {
var slider = document.getElementById("slider");
// Set slider value as fontSize
cont.style.fontSize = slider.value + "px";
}
</script>
Re: Lite hjälp med Javascript
Postat: 25 februari 2022, 09:00:37
av SeniorLemuren
I föregående lösning så ändrar jag förstås hela inputfältets storlek. Om jag i stället vill komma åt själva texten i inputfältet för att t.ex ändra textfonten eller textfärgen på fonten så blir frågan hur skall det skrivas i ställetför detta
Kod: Markera allt
var cont = document.getElementById("container");
Re: Lite hjälp med Javascript
Postat: 25 februari 2022, 09:12:38
av rvl
Nånting..?
Kod: Markera allt
<!DOCTYPE html>
<html>
<body>
<center>
<br /><br />
<div style="padding: 20px; margin: 50px;
font-size: 20px; border: 5px solid green;" id="container" class="container">
<p id="lemur">
Denna text vill jag ersätta med texten i ett inputfält. Det var hundra år sedan jag pulade med Javascript och minnet är kort i min ålder.
</p>
</div>
<div>
<h2>Change Font Size</h2>
</div>
<input type="range" min="10" max="30" id="slider" onchange="changeSizeBySlider()" value="20" />
</center>
<form id="myForm">
Ny text: <input type="text" id="nyText" value="Elektronikforumet.com">
</form>
<button onclick="myFunction()">Updatera</button>
</body>
</html>
<script>
var cont = document.getElementById("container");
function changeSizeBySlider() {
var slider = document.getElementById("slider");
// Set slider value as fontSize
cont.style.fontSize = slider.value + "px";
}
function myFunction() {
var x = document.getElementById("nyText").value;
document.getElementById("lemur").innerHTML = x;
}
</script>
Re: Lite hjälp med Javascript
Postat: 25 februari 2022, 11:37:14
av SeniorLemuren
Japp. Jag hade löst det innan jag såg din lösning, de var nästan identiska. skillnaden var att jag uppdaterar automatiskt vid oninput och slipper på så vis knappen. Tackar alla för hjälpen.
ps. Vi hade tydligen hittat samma exempelkod med tanke på att myFunction var exakt lika.
Kod: Markera allt
<!DOCTYPE html>
<html>
<body>
<center>
Skriv text: <input type="text" id="container" value="" oninput="myFunction()">
<p id="demo"></p>
<input type="range" min="10" max="30" id="slider" onchange="changeSizeBySlider()" value="20" />
</center>
</body>
<script>
var cont = document.getElementById("demo");
function changeSizeBySlider() {
var slider = document.getElementById("slider");
cont.style.fontSize = slider.value + "px";
}
function myFunction() {
var x = document.getElementById("container").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</html>