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?
<!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>
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.
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
<!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>
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.